CSS positioning -- padding/margin problems

  • Nightslyr
  • Proficient
  • Proficient
  • Nightslyr
  • Posts: 283

Post 3+ Months Ago

I noticed that my layout has a pretty big gap between the header and the menu in Firefox. At first I thought I could fix the problem by setting the padding, margin, and borders of the appropriate div blocks to 0, then artificially create a gap between the header and menu by giving my header a small white border. Unfortunately, it didn't work, as the gap between elements is still rather large.

I made the header's border black, and I can now see the problem, although I don't know the best way to fix it. Under my header image, in Firefox, there appears to be a 1-2px high white line inside its div block. This is apparently created from me not specifying a background color for the header block. The problem is, any color I choose is probably going to look a bit awkward as the image uses a gradient.

Is there any way I can move the extra margin/padding that's showing up so the gap isn't visible -- maybe something like the w\idth hack? Or am I stuck needing to use the image as a background for an otherwise empty div block?

Page in question is here: http://www.nightslyr.com/franco/index.html
CSS used is here: http://www.nightslyr.com/franco/styles2.css

Thanks in advance! :)
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Impel GD
  • Professor
  • Professor
  • Impel GD
  • Posts: 834
  • Loc: Cologne, Germany

Post 3+ Months Ago

How about reducing the top block to exactly the right size and applying a margin-top to the div(s) below?

Also, why are you using a mixture of divs and tables for layout? You should only need divs for layout.
  • Nightslyr
  • Proficient
  • Proficient
  • Nightslyr
  • Posts: 283

Post 3+ Months Ago

Impel GD wrote:
How about reducing the top block to exactly the right size and applying a margin-top to the div(s) below?

Also, why are you using a mixture of divs and tables for layout? You should only need divs for layout.


Making the header div exact fit seems to have helped things.

I'm trying to do a tableless layout, but haven't had much luck. I just commented out my table code, and things have turned messy. Specifically, my menu div takes up the entire width of the container block, and my content div is placed below it. This is after I put a float: left; instruction in the menu, too. Any ideas?

EDIT: Never mind, I found it.
  • Nightslyr
  • Proficient
  • Proficient
  • Nightslyr
  • Posts: 283

Post 3+ Months Ago

Things are working beautifully, except for one thing -- the space between header and menu is a little too big in IE now, but looks perfect in Firefox and Opera. I'm a bit of a perfectionist, so is there any way for me to shrink things by a pixel or two in IE without screwing up the way it looks in the other two browsers?
  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Posts: 861
  • Loc: BKNY

Post 3+ Months Ago

i swear... i must be the devil... but i'm just gonna say, drop in an IE hack...

specifically, the hack i'm talking about is where you have, for instance:
Code: [ Select ]
margin: 0 0 0 14px !important;
margin: 0 0 0 10px;
  1. margin: 0 0 0 14px !important;
  2. margin: 0 0 0 10px;

in the example above, IE will read it as 10px margin because it can't read the script above it. every other browser will see 14px and prioritize it over the 10px because it says "!important".
  • Nightslyr
  • Proficient
  • Proficient
  • Nightslyr
  • Posts: 283

Post 3+ Months Ago

roarmeow wrote:
i swear... i must be the devil... but i'm just gonna say, drop in an IE hack...

specifically, the hack i'm talking about is where you have, for instance:
Code: [ Select ]
margin: 0 0 0 14px !important;
margin: 0 0 0 10px;
  1. margin: 0 0 0 14px !important;
  2. margin: 0 0 0 10px;

in the example above, IE will read it as 10px margin because it can't read the script above it. every other browser will see 14px and prioritize it over the 10px because it says "!important".


Thanks for the tip! It worked pretty well. IE still renders it slightly too big, but that's probably a reflection on how that browser handles the box model.

That gets me thinking...I set my IE-only header margin setting to 0, but it's not lying flush on the top of the menu div. If I wanted to do a more graphically intense site, and needed to have the header and menu touching because they form an image together, would I have to set a negative margin value for IE? Is that even possible?
  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Posts: 861
  • Loc: BKNY

Post 3+ Months Ago

yes and yes...

being a lazy sucka who doesn't like to really work my mind all that much for the one browser that seems to read code different from every other browser on the planet, i do it all the time... negative margins are like tarring pavement that's coming up... sure, you could tear up all the pavement and do it fresh, but why not just tar it?
  • Nightslyr
  • Proficient
  • Proficient
  • Nightslyr
  • Posts: 283

Post 3+ Months Ago

roarmeow wrote:
yes and yes...

being a lazy sucka who doesn't like to really work my mind all that much for the one browser that seems to read code different from every other browser on the planet, i do it all the time... negative margins are like tarring pavement that's coming up... sure, you could tear up all the pavement and do it fresh, but why not just tar it?


Hehe :)

BTW, does the !important hack work for everything? I mean, I have a hack in my CSS to specify the width of my menu. I use width: 150px; for my IE setting and w\idth: 149px; (I think) for my non-IE setting. Could I instead use width: 149px !important; ?
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

If you want that little white gap between the left menu and the header to
vanish, then there is a surprisingly easy solution. You have:

<div class="header">
<img src="facheader.gif" alt="header" />
</div>


Note the carriage returns you have there? That is the cause.

Put it all on one line and you are good to go.
  • Nightslyr
  • Proficient
  • Proficient
  • Nightslyr
  • Posts: 283

Post 3+ Months Ago

SugarKane wrote:
If you want that little white gap between the left menu and the header to
vanish, then there is a surprisingly easy solution. You have:

<div class="header">
<img src="facheader.gif" alt="header" />
</div>


Note the carriage returns you have there? That is the cause.

Put it all on one line and you are good to go.


I thought that whitespace was ignored by the browser so long as it wasn't placed within a tag?
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

Not with IE and not with images used in this way.

Try it and see for yourself ... it's one of those IE "nasties" that you need to
keep in mind.


Specifiaclly, it's not the carriage return itself, but rather the space at the end of
the image tag.
  • Nightslyr
  • Proficient
  • Proficient
  • Nightslyr
  • Posts: 283

Post 3+ Months Ago

SugarKane wrote:
Not with IE and not with images used in this way.

Try it and see for yourself ... it's one of those IE "nasties" that you need to
keep in mind.


Yeah, I just tried it, and it worked (thanks!). So, it it only with images in IE? Or does this gremlin strike regardless?
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

I'm not sure where else it happens ... it is most easily spotted with div's
containing a single image - sticks out like a sore thumb.

Something to experiment with one day.
  • Nightslyr
  • Proficient
  • Proficient
  • Nightslyr
  • Posts: 283

Post 3+ Months Ago

SugarKane wrote:
I'm not sure where else it happens ... it is most easily spotted with div's
containing a single image - sticks out like a sore thumb.

Something to experiment with one day.


So...is there anything IE does do right? :lol:
  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Posts: 861
  • Loc: BKNY

Post 3+ Months Ago

hahaha...

good call, Kane... i didn't even look at the actual page... that's a pretty clear one... yeah... funny as all getout... i really like using carriage returns and tabs to layout my code so it's easier to read through again in the future, and i frequently have to screw up my nicely ordered html just for that snotty MSIE bugger...

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 38 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.