What's up with margins and padding in IE?

Donny Bahama · #1 (**permalink**) Apr 15th, 2007, 20:54

I came up with (what I believe is) a new/unique way of doing css rollovers with images as links. My nav box is white, and the same width as all the images to be used as links. (The images are really just text, but they're made using a font that's perfect for the site.) The images have a white background (to match the nav container) and I stack them vertically with a few pixels of vertical padding. I then set

Code: Select all

#sidebar a:hover img {
background:#800018;
}

so that the background color is the same as the page background. The net result is that you get 2 nice, contrasting-color bars at the top and bottom of each link on rollover.

At least, that's the theory. It works great in FF, IE7, Opera, Safari, etc. but in IE6, something is not quite right. The padding gets screwed up and then the links (and the page) get all "jumpy".

Here's a link where you can see it in action: http://stickpuppy.com/dhs57/welcome.html
(Be sure to check it out in both a modern browser and a pre-7 version of IE.)

If anyone can point me toward why this is happening, I'd sure appreciate it!

Lchad · #2 (**permalink**) Apr 15th, 2007, 23:46

Here's a good navigation to stop the flicker http://www.tanfa.co.uk/css/examples/...no-preload.asp

Ryan Fait · #3 (**permalink**) Apr 16th, 2007, 00:23

Here's what you can do to make it work x-browser

Code: Select all

 .nav a img {
    border: solid #fff;
    border-width: 0 3px;
}
.nav a:hover img {
    border-color: #500;
}

Donny Bahama · #4 (**permalink**) Apr 16th, 2007, 00:48

Thanks for the help, guys, but I'm not using thebackground-position trick with two images in one (sliding them around as necessary.) This is a whole different animal (and all my searching hasn't turned up any documentation of this method, so, for now at least, I'm taking credit for inventing "the Donny Bahama css rollovers"!

) Let me try to explain it a little better...

I'm using single, static images. 100% of each image is shown at all times, so the width is set and set properly from the beginning. The background (as well as the width) of my images are the same color (and width) as the sidebar container they're in, but there's 4 pixels of padding above and below each one. On hover, I set the background color for the image to a different color - specifically, the same color as my page background (which surrounds the sidebar container.) I think it looks great - when it's viewed in modern, standards-compliant browsers. But IE does something funky with that padding I'm using that I don't understand, and as a result, the rollover borders aren't a consistent thickness and some (not always all) of the images get dislodged and shoved around (albeit ever so slightly) when another image is highlighted.

Code: Select all

<div id="sidebar">
    <div id="sidemenu">
        <a href="welcome.html"><img src="img/menu_welcome.gif" width="188" height="33" alt="Welcome" /></a>
        <a href="activities.html"><img src="img/menu_activities.gif" width="188" height="61" alt="Reunion Activities" /></a>
        <a href="accommodations.html"><img src="img/menu_accom.gif" width="188" height="39" alt="Accommodations" /></a>
        <a href="committee.html"><img src="img/menu_committee.gif" width="188" height="60" alt="Reunion Committee" /></a>
        <a href="yearinreview.html"><img src="img/menu_yir.gif" width="188" height="63" alt="1957- Year In Review" /></a>
        <a href="classmates.php"><img src="img/menu_classmates.gif" width="188" height="36" alt="Classmates" /></a>
        <a href="dhsmemories.html"><img src="img/menu_dhsmem.gif" width="188" height="39" alt="DHS Memories" /></a>
        <a href="e-medley.php"><img src="img/menu_medley.gif" width="188" height="41" alt="e-Medley" /></a>
        <a href="pastreunions.html"><img src="img/menu_past.gif" width="188" height="38" alt="Past Reunions" /></a>
        <a href="celebration.html"><img src="img/menu_celeb.gif" width="188" height="58" alt="50th Reunion Celebration" /></a>
    </div>
</div>

Note that all the images above are exactly the same width - and the width for the container matches...

Code: Select all

#sidebar {
    background-color:#800018;
    float:left;
    padding:0;
    width:188px;
}

#sidemenu {
    background-color:#fff;
    color:#800018;
    padding:10px 0;
    width:188px;
}

#sidemenu a:link {
    display:block;
    text-decoration:none;
}

#sidemenu a img {
    display:block;
    border:0;
    padding:4px 0;
}

#sidemenu a:hover {
    _border-top:2px solid #800018;
    _border-bottom:2px solid #800018;
}

#sidemenu a:hover img {
    background-color:#800018;
    color:#800018;
    _border-top:2px solid #800018;
    _border-bottom:2px solid #800018;
}

Ryan Fait · #5 (**permalink**) Apr 16th, 2007, 01:10

And I used borders to achieve the same effect, only it works x-browser... I don't understand what you're saying...

Donny Bahama · #6 (**permalink**) Apr 16th, 2007, 01:25

The understanding was mine. I thought you were telling me to add the code you had posted to my code - and I didn't understand how adding left and right borders was going to do anything for me.

Donny Bahama · #7 (**permalink**) Apr 16th, 2007, 01:31

Quote:

Originally Posted by Ryan Fait

And I used borders to achieve the same effect, only it works x-browser

I just tried to implement yours and it didn't work in IE 5.5... the border doesn't change color. (I thought I remembered trying to change the border color and having problems with it.)

Donny Bahama · #8 (**permalink**) Apr 16th, 2007, 01:38

Quote:

Originally Posted by Donny Bahama

I just tried to implement yours and it didn't work in IE 5.5... the border doesn't change color. (I thought I remembered trying to change the border color and having problems with it.)

I think it's a problem with my IE5.5 browser. It's a hacked version that can live side-by-side on the same machine with a real/full version of IE, and I think something is messed up because I can get it to display the borders intermittently.

Thanks for the help, Ryan!

Ryan Fait · #9 (**permalink**) Apr 16th, 2007, 01:40

Doh, make that border-width: 3px 0; not 0 3px. Hm. Maybe IE 5 doesn't like a:hover img. I guess I don't know about that one. Anyway, I would NEVER use the img tag for navigation. Ever.

Code: Select all

<ul class="nav">
    <li><a href="#" class="reunion">Reunion Activities</a></li>
    <li><a href="#" class="accommodation">Accommodations</a></li>
    <li><a href="#" class="committee">Reunion Committee</a></li>
</ul>

<style type="text/css">
.nav {
    text-indent: -5000px;
}
.nav li a {
    width: 120px;
    height: 30px;
    display: block;
    border: 3px 0 #fff;
}
.nav li.reunion a {
    background: url(reunion.gif) no-repeat;
}
.nav li.accommodations a {
    background: url(accommodations.gif) no-repeat;
}
.nav li.committee a {
    background: url(committee.gif) no-repeat;
}
.nav li a:hover {
    border-color: #500;
}
</style>

Donny Bahama · #10 (**permalink**) Apr 16th, 2007, 02:23

Quote:

Originally Posted by Ryan Fait

I would NEVER use the img tag for navigation. Ever.

OK - I'm giving this a try, but I'm curious about the above statement. Is it because of semantics? I have a list of links, ergo <li> is the properly descriptive element? Or is there more to it than that? (I want to understand, Obi Wan.)

Quote:

Code: Select all

.nav {
    text-indent: -5000px;
}
.nav li a {
    width: 120px;
    height: 30px;
    display: block;
    border: 3px 0 #fff;
}
.nav li.reunion a {
    background: url(reunion.gif) no-repeat;
}
.nav li a:hover {
    border-color: #500;
}

3 questions for you:
1. If I send .nav -5000 pixels into nowhere land, how are my bgimages going to show up where I want them?
2. Isn't the text from the <li> going to sit on top of my bgimages and look like muck? (I'm guessing the same answer applies to both these questions.)
3. I can't specify a height for .nav li a {} because the height of the bgimages varies... is it safe to omit it and let the browser figure it out based on the hight of the bgimage? Or should/can I specify height individually on each of the .nav li.reunion a{} selectors?

Ryan Fait · #11 (**permalink**) Apr 16th, 2007, 02:40

It makes the text move 5000 pixels to the left, but the background image will be in the proper place. Hence, the text is hidden, but your images show up. No, you must specify the height. If they are different, you can include it in .nav li.reunion a { height: 35px; } or .nav li.accommodations li a { height: 40px; }

That answer everything?

Donny Bahama · #12 (**permalink**) Apr 16th, 2007, 02:47

Quote:

Originally Posted by Ryan Fait

That answer everything?

Almost... how well-supported is the "text-indent" property? This won't crumble on older browsers? Couldn't I just set the text-color for the <li>s to transparent? (Or can you only use transparent for background?)

And then there's the question of why I should NEVER use images for navigation. Ever.

We'll see what happens when I try to implement all this, though! lol!

I really appreciate all the help, Ryan!

Donny Bahama · #13 (**permalink**) Apr 16th, 2007, 03:24

OK. That didn't work out well! In FF, all hover borders show all the time (so, of course, there's no rollover effect.) In IE55, my navbar shrunk down to this small white box with bullets down the left side of it! (No bgimages visible, no links, and no rollovers.)

So far, I had better x-browser compatibility where I started. Maybe there's something to "the Donny Bahama css rollovers" after all!

Donny Bahama · #14 (**permalink**) Apr 16th, 2007, 03:39

OK, so first of all, I was wrong about the behavior in FF. After a hard refresh, it was much the same as IE55 - empty white box, bullets to the left. I thought maybe

Quote:

Originally Posted by Ryan Fait

Code: Select all

<ul class="nav">
    <li><a href="#" class="reunion">Reunion Activities</a></li>
    <li><a href="#" class="accommodation">Accommodations</a></li>
    <li><a href="#" class="committee">Reunion Committee</a></li>
</ul>

should have been

Code: Select all

<ul class="nav">
    <li class="reunion"><a href="#">Reunion Activities</a></li>
    <li class="accommodation"><a href="#">Accommodations</a></li>
    <li class="committee"><a href="#">Reunion Committee</a></li>
</ul>

But that didn't help.

Everything looks OK to me. Apart from not understanding the behaviors of ul's as menus, it looks like it ought to work.

pa007 · #15 (**permalink**) Apr 16th, 2007, 10:15

If you use images for navigation with out a text fallback then there a few issues. My main concern with images based nav is accessibility - how are people using assisitive technology which often reads what is on screen (from the code) supposed to know what nav item is what? Alt text is good as are titles but pure text in the html is better.

It's also bad for seo as the little search robots read your code in much the same way as a screen reader does. So good seo is good for accessibility too. It's great the way things work out, don't you think.

Pete.

Ryan Fait · #16 (**permalink**) Apr 16th, 2007, 11:44

Oh dear, I've been having a heck of a time checking my code. I should've applied the classes to the <li>'s instead of the anchors. I'm not making this as easy as I should! Um. After you changed that, like you did (it's great to see that you knew what to do, by the way), what did the page look like?

Donny Bahama · #17 (**permalink**) Apr 16th, 2007, 15:33

Quote:

Originally Posted by pa007

If you use images for navigation with out a text fallback then there a few issues. My main concern with images based nav is accessibility - how are people using assisitive technology which often reads what is on screen (from the code) supposed to know what nav item is what? Alt text is good as are titles but pure text in the html is better.

It's also bad for seo as the little search robots read your code in much the same way as a screen reader does. So good seo is good for accessibility too. It's great the way things work out, don't you think.

Pete.

Thanks for the info, Pete. I am using alt text (and meant to add titles, but I don't think I have yet.)

SEO - that makes sense. All the alumni have been notified by mail that the site is up (albeit partially up) so I don't know that anyone involved in this particular project cares about search engine ranking, but for future reference, I probably ought to refrain from bad habits now.

Donny Bahama · #18 (**permalink**) Apr 16th, 2007, 15:41

Quote:

Originally Posted by Ryan Fait

Oh dear, I've been having a heck of a time checking my code. I should've applied the classes to the <li>'s instead of the anchors. I'm not making this as easy as I should!

No worries, Ryan. The world needs its sticky footers!

Quote:

After you changed that, like you did, what did the page look like?

The page looked much the same even after applying the classes to the <li>s - small white box (about half the height it should have been) with no text or bg images, and bullets down the left side.

Quote:

(it's great to see that you knew what to do, by the way)

Thanks! I'm not your average moron. (I'm an exceptional moron!

) I actually understand quite a bit of this stuff, having muddled through it for a couple of years or more. But now I'm trying to really own the knowledge so I can do it right the first time instead of wasting time with trial and error (and posting here when I still can't figure it out.)

Donny Bahama · #19 (**permalink**) Apr 16th, 2007, 22:19

Progress...

I experimented with different variations of

Code: Select all

.sidemenu li.menu-welcome a
.sidemenu li.menu-welcome
.sidemenu li a.menu-welcome

(had to move the classes back into the anchor tags for that last one) but nothing worked. Somehow, though, when I went back to the original (.sidemenu li.menu-welcome a) the bg images showed up.

No matter what I do, though, I can't get the borders to change color on hover. For a minute I thought I had it - I needed to add 6 pixels (to allow for the 3px top+bottom border) to the height declaration for each selector that declared a bgimage. Alas, that did not do the trick.

Curiously, when I look at it in Firebug, it seems to be ignoring the border properties. No idea why it would do that. I thought maybe I needed to use longhand, so I made separate property declarations for border-width and border-color. This didn't seem to change anything.

I'm at wit's end. Tried everything I could think of and I'm close, but no rolllovers. :surrender: Here's a link in case anyone wants to check it out in Firebug... http://stickpuppy.com/dhs57/welcome.new.php

Donny Bahama · #20 (**permalink**) Apr 16th, 2007, 22:50

As I said, when I look under the hood using Firebug, it appears to be ignoring the border-width. Instead, it's inheriting it from a * section at the beginning of the css file:

Code: Select all

* {
    padding:0;
    margin:0;
    border:0;
    font-size:99.99%;
}

but when I disable the border declaration there, it doesn't change anything.
:blowup:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Margins in IE are different than Firefox	KiwiTaicho	Web Page Design	3	Sep 28th, 2007 14:57
collapsing page margins	aflacduck	Starting Out	15	Jul 9th, 2007 19:31
Margins need fixing	notagz1	Starting Out	9	May 28th, 2007 14:03
ff margins	Dapandyman	Web Page Design	10	Feb 12th, 2007 23:03
body margins	benbacardi	Web Page Design	2	Apr 10th, 2004 14:51

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
What's up with margins and padding in IE?