The Geeks & God Podcast

CSS Headaches

January 17, 2004 - 9:45pm

FrankJohnson

Joined: 11/28/2008

Friends:

I'm hoping someone will be able to help me with two problems related to this page:

I think both problems are somehow related to this portion of my style sheet:

QUOTE

#container {
width: 760px;
\width: 780px;
w\idth: 760px;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-image: url(/images/container_background.gif);
background-color: black;
}

#banner {
padding: 0px;
margin-bottom: 0px;
}

#content {
padding: 10px;
margin-top: 0px;
margin-right: 200px;
background-color: white;
text-align : left;
}

#navmenu {
position: relative;
top: -3px;
left: 0px;
height: 21px;
width: 760px;
background-color: black;
}

#sidebar-a {
float: right;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
padding: 0px;
background-color: rgb(204, 204, 204);
height: 100%;
}

.footer {
clear: both;
padding: 5px;
margin-top: 5px;
background-color: rgb(51, 51, 51);
font-size : 8pt;
color : white;
}

A.footer {
clear: both;
padding: 0px;
margin-top: 0px;
background-color: rgb(51, 51, 51);
font-size : 8pt;
color : white;
text-decoration : none;
}

A.footer:hover {
clear: both;
padding: 0px;
margin-top: 0px;
background-color: rgb(51, 51, 51);
font-size : 8pt;
color : white;
text-decoration : underline;
}

First Problem
Can someone tell me why the content in the right-hand column falls below the content in the left-hand column (rather than beside it)?

Second Problem
The drop-down navigation menu (which I created using a product called AllWebMenus Pro from likno.com) is somehow being affected by the css. The same navigation menu is used on this page, which is a mockup I originally showed my client. The mockup was done in tables, but the version I'm working on now uses css positioning.

The way the menus work on the design which uses table is exactly how I want it to work. But the menus on the design which uses css positioning seems to add some dark gray padding around each sub menu item, seems to make the borders between sub menu items thicker, and seems to add some black padding around each main menu item (Home, About Us, Directories, etc.) so that the blue rollover color does not appear to "cover" the entire menu item the way it does on the design which uses table.

Any thoughts on either of these problems?

Thanks in advance for any help anyone can offer - I really appreciate it.

Frank

January 17, 2004 - 10:03pm

sunshine

Joined: 11/28/2008

I'll need to take a closer

I'll need to take a closer look at your source and css. Be back in a few....

Edit:

Phew, that's hard to read.

I can't even see the dropdown menu, so I can't see the results you're describing. I can see it in your other page, but not the css one.

That's pretty peculiar. Maybe you've got some duplicate rules overriding something? or perhaps there's some important piece of the JavaScript missing from the css one?

As far as the menu being pushed down, maybe you need to check the combined widths and paddings to make sure that that's not the problem. I can't see from looking at the source what's wrong (I'm tired and hungry so I can't study it real well).

What have you tried/checked to fix these problems?

January 17, 2004 - 10:34pm

FrankJohnson

Joined: 11/28/2008

Thanks Sunshine.What browser

Thanks Sunshine.

What browser are you using? I can see the navigation menu (in the black bar just under the top banner) on the css page in IE 6 / Windows 2K. It's exactly the same code as on the table design page (with one minor exception - it's set to be a bit higher on the page in the table design version).

Regarding the part that's pushed down, it's not the menu that's being pushed down, but the prayer request portion in the right-hand column. I suspect that's what you meant, but just in case ....

Thanks,
Frank

January 17, 2004 - 10:40pm

sunshine

Joined: 11/28/2008

Firebird 0.7 (it runs off the

Firebird 0.7 (it runs off the Mozilla engine -- kind of like Netscape used to, only Firebird is made by the same people as Mozilla).

What's odd is that I can see the table page menu, but not the other. That makes me think that the CSS that the JavaScript is generating is interfering/being interferred with by your pages CSS.

Yes, I saw that it was the prayer request section being pushed down. Weird, that is.

January 17, 2004 - 10:42pm

sunshine

Joined: 11/28/2008

On another thought -- it's

On another thought -- it's very weird considering that the grey background is defined by the prayer request div, so if it was being pushed down, then the grey background should only be a small square.

January 17, 2004 - 11:00pm

FrankJohnson

Joined: 11/28/2008

The grey background is part

The grey background is part of the div that holds the prayer request graphic, but the primary div which holds the entire centered portion of the site has a background image that puts grey in the right-hand column as well. My idea there is to make the columns even out vertically even if one of them has more content than the other.

I just checked the menu in Firebird - it's at the bottom of the page, but it's not working at all.

I have a support request into the folks that developed AllWebMenusPro - we'll see what they say.

Thanks,
Frank

January 17, 2004 - 11:02pm

sunshine

Joined: 11/28/2008

Ah. Ok. See if they'll be

Ah. Ok. See if they'll be helpful at all.

I gotcha. I'm afraid I can't be very helpful. I can't see what's wrong. :/

January 18, 2004 - 12:16am

carrot

Joined: 11/28/2008

Regarding the position of the

Regarding the position of the <div id="sidebar-a">, you need to put it before the <div id="content"> in the HTML source.
As you are using a float, it will float in the flow of the document.
If you wanted the sidebar-a div after the content div in the flow of the HTML you would have to use absolute positioning.

Simon Job · blog · twitter | church · maths teaching

January 18, 2004 - 12:21am

livetoserve

Joined: 11/28/2008

Ok i've been working with

Ok i've been working with your code for an hour or so now and I think I've atleast fixed the Prayer request block problem I've got it at the top of the page next to the content now rather than at the bottom.

Here's what I did...

You had this code at the bottom of your page (which I would have done too just because it makes sense)

CODE

    <div id="sidebar-a">

<div class="inverse">Prayer Requests</div>

<div class="sidebarcontent">
<a href="prayer.php"><img src="http://www.hesed.com/client/11thhour/images/prayer.gif" alt="24-Hour Message & Prayer Phone" width="187" height="100" border="0"></a><br>
<a href="prayer.php" class="small">Call or Email Your Request</a>
</div>

    </div>

What you need to do is move it to the top so the top of your source looks like this...

CODE

    <div id="navmenu">
     
    </div>

    <div id="sidebar-a">

<div class="inverse">Prayer Requests</div>

<div class="sidebarcontent">
<a href="prayer.php"><img src="http://www.hesed.com/client/11thhour/images/prayer.gif" alt="24-Hour Message & Prayer Phone" width="187" height="100" border="0"></a><br>
<a href="prayer.php" class="small">Call or Email Your Request</a>
</div>

    </div>

    <div id="content">

That should take care of that problem.

I'm going to work on the menu. It's dropping below where you want it in Opera 7.23 but looks ok in IE6. If i get it figured out I'll edit.

Blessings,

Scott

"I am not what I ought to be. I am not what I want to be. I am not what I hope to be. But still, I am not what I used to be. And by the grace of God, I am what I am." - John Newton (1725-1807)

January 18, 2004 - 2:29am

FrankJohnson

Joined: 11/28/2008

Thanks Carrot and Scott -

Thanks Carrot and Scott - that did the trick on bringing the prayer request section up where I want it.

If you have a moment, could you refer me to someplace on the web that explains why it works this way? When it comes to css positioning, I can get it done about half the time just by trial and error, but I know that I don't have the background knowledge to figure it out more logically.

Thanks again,
Frank

January 18, 2004 - 2:38am

livetoserve

Joined: 11/28/2008

Well I don't know of a place

Well I don't know of a place that explains why it works this way but if you think about it, it makes pretty good sense.

You want it at the beginning because in reality it is the first thing displayed at the top of the page. It's just floating so the following text would go underneath it. So it would be logical to have it first and move it to the right so it's out of the way. My own logic from my own brain. Nothing technical about it. I basicly figured it out the same way.. through trial and error.

Hope my logic helps /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Scott

"I am not what I ought to be. I am not what I want to be. I am not what I hope to be. But still, I am not what I used to be. And by the grace of God, I am what I am." - John Newton (1725-1807)

January 18, 2004 - 5:01am

iLuke

Joined: 11/28/2008

Hmm... Don't know if this is

Hmm... Don't know if this is exactly what you're looking for, Frank, but it might help:

CSS Positioning Tutorial (and it's by our very own sunshine aka Mary!!!) /biggrin.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" />

Blessings,
Luke

--
iLuke

January 18, 2004 - 6:37am

carrot

Joined: 11/28/2008

Floatutorial is the best

Floatutorial is the best stuff I've seen on floats...

Simon Job · blog · twitter | church · maths teaching

January 19, 2004 - 3:41am

livetoserve

Joined: 11/28/2008

Hey... Just wanted to tell

Hey... Just wanted to tell you that your menu is at the very bottom of the page in Firebird.

Scott

"I am not what I ought to be. I am not what I want to be. I am not what I hope to be. But still, I am not what I used to be. And by the grace of God, I am what I am." - John Newton (1725-1807)

January 29, 2004 - 9:04am

sunshine

Joined: 11/28/2008

Agh, I missed the rest of the

Agh, I missed the rest of the conversation (it did not appear as "unread").

Floats are funny in that they are "removed from the document flow" according to the W3C but they are still dependant on source order.

As the floatutorial states:
http://css.maxdesign.com.au/floatutorial/i...ntroduction.htm

QUOTE

Block level elements above a floated element will not be affected by it. However, elements below will wrap around the floated element....

If you need/want to use floats instead of a positioning scheme, then fixes would be to change change the source order or play around with floats and margins.

If keeping the navigation menu second in your source was important, then you could go with the second option. If it isn't important which order they appeared in, then leave it as you've got it.

The floats and margins solution is to:

- float the container div left, assign it 100% width, and give it a NEGATIVE right margin that is equivalent to the width of your floated right div (ie: floated right div is 200px, then give container div right margin of -200px)

- give the content div a right margin equivalent to the width of your content div

http://www.ryanbrill.com/floats.htm

As I understand it, this creates a kind of hole for the div to slide into.