Page 1 of 1

IE display bug (inline elements with padding and margins)

Posted: Sat Sep 25, 2004 2:47 pm
by newmember
please look carefully at this picture:

Image

what you see is:

Code: Select all

<div id="menu">
<a>first</a>
<a>second</a>
<a>third</a>
</div>

#menu a&#123;padding:5px;margin-left:10px;&#125;
IE draws transparent(inverted) border around items on the page when you click a link for example...
(you can see this border when you press tab key)
on my picture there is the same border around link but IE displace it left and down...actually the whole active area of a link is displaced :!: ...

I put in the picture just for comparison how the same thing looks in firefox...
there you can see that this thin border is exactly around a link...

after looking for couple of minutes at how this looks in IE i realized that IE simply ignores :? padding and margins and renders links exactly as if they were without any styling....

i tried to put links inside list and set display:inline for <li> but this only fixed horizontal displacement but not vertical...

Can i fix it somehow?
thanks


feyd | added [img] and

Code: Select all

tags to make it easier to read.[/color]

Posted: Mon Sep 27, 2004 5:35 am
by newmember
i managed to avoid this behaviour by not setting the vertical padding

Posted: Fri Oct 08, 2004 11:01 am
by no_memories
use <dl><dt></dt></dl> for that kind of menu.

I'll post some code on how to do that later today.

edited:

Here is the markup and CSS for a simple menu, you can go to my home page for a full example.

Code: Select all

<html>

<head>

<title>Sample CSS Menu</title>

<style type="text/css" media="screen">
body &#123;
font-family: Arial, sans-serif;
text-align: center;
&#125;
/* it's best to use a simple font with CSS menus for bross platform reasons. */
/* Horizonatal CSS Navigation */
#menuwraper &#123;
color: #000;
background: #bfbfd0;
width: 760px;
height: auto;
margin: 0 auto 0 auto;
padding: 0;
z-index: 2;
&#125;

#menu &#123;
color: #000;
background: #bfbfd0 /* url( http://www.yourdomain.com/images/your-menu.gif ) 0% 0% repeat-y */ ;
margin: 0 auto;
padding: 4px 0px 5px 0px;
border: 1px solid #000; /* use only if you don't want to use a background image, but it's
best to use a background repeating image of 1px for crosss browser reasons.
for this however I will use a border rule, k.

Note: when using background image to put in a border, it must be exactly the same width and only needs to be 1px high. */
z-index: 3;
&#125;

#menu dl &#123;
display: block;
color: #000;
background: transparent;
margin: 0;
padding: 0;
&#125;

#menu dt &#123;
display: inline;
color: #000;
background: transparent;
margin: 0;
padding: 0 40px;
font-size: 12px;
font-weight: bold;
&#125;

#menu a &#123;
color: #000;
background: #bfbfd0;
border-right: 2px solid #bfbfd0;
border-left: 2px solid #bfbfd0;
margin: 0;
padding: 4px 10px 5px 10px;
text-decoration: none;
&#125;

#menu a:hover &#123;
color: #ffffdc;
background: #a2a2b4;
border-right: 2px solid #e6e6fa;
border-left: 2px solid #e6e6fa;
text-decoration: none;
&#125;
</style>

</head>

<body>

<!-- Keep in 1 single line so unwanted white-space won't occur -->
<!-- Notice how simple the actual markup is. -->
<div id="menuwraper">
<div id="menu"><dl><dt><a href="#" title="Link 1">Link 1</a></dt><dt><a href="#" title="Link 2">Link 2</a></dt><dt><a href="#" title="Link 3">Link 3</a></dt><dt><a href="#" title="Link 4">Link 4</a><dt><a href="#" title="Link 5">Link 5</a></dt></dt></dl></div>
</div>

</body>

</html>

Posted: Sat Oct 09, 2004 5:41 am
by twigletmac
Is using DL DT correct semantically - wouldn't UL LI be more appropriate than a definition list? (from an accessibility, screen reader point of view)

Mac

Posted: Sat Oct 09, 2004 8:25 am
by no_memories
Well, from that perspective yes, but, and there is always a but.

I.E. (No big surprise there) puts about a foot of real state to the left of a <ul> no matter what CSS you use. As with all things, there are compromises, this is one such case. The <dl> is very stable in multi-use times.

If anyone can come up with a working <ul> type of menu (in the real world) I'll throw a party. :P

But seriously, for some reason the <ul> when used multiple times on the same page, will hose up. And like I said, it doesn't matter what or how I tried to use the CSS to correct the problem.

I'm all eyes to see a real world example that works (not just a one time, one page example), would be a new one for me. Even on the forum template I am building, I used <dl>s for this reason; you will notice a mouse over on the header and footer, both of which are pure CSS. (No Java) for some reason though, no matter what CSS rule (for the second time, lol) I threw at it, multiple <ul>'s on a page will take I.E. for a ride. (Usually about 50 pixels to the left is typical. (Thanks once again Microsoft for not updating your browser)

Hope that answers that question properly :)

Posted: Sat Oct 09, 2004 9:34 am
by timvw
http://www.alistapart.com/articles/slidingdoors/

does a little more than you expect though ;)

Posted: Sat Oct 09, 2004 10:05 am
by no_memories
AHHH,

but here you see, this is the difference between this article and what I do in general. ALA is a great resource, but.

They claim to promote web standards but are almost always throwing in a "hack" to get their article nuances to work and I quote from the above article:

"One Hack for Consistency"

I don't use "hacks" to get my stuff to work, either it uses plain markup and CSS or it don't get put in. Promoting hacks is (in a way) promoting the derogation of standards.

I suppose however, the <dl> issue could be seen as a "hack" from a certain point of view, but I don't need to tweak the CSS to get it to work.

Code: Select all

#header a &#123;
    float:left;
    display:block;
    background:url("right.gif")
      no-repeat right top;
    padding:5px 15px 4px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#765;
    &#125;
  /* Commented Backslash Hack
     hides rule from IE5-Mac \*/
  #header a &#123;float:none;&#125;
  /* End IE5-Mac hack */
Resorting to this is common in ALA articles; and the reason I only use basic CSS rules and markup that work without resorting to this.

Granted CSS isn't perfect when it comes to browsers, but we can use rules that most browsers will agree upon. ALA does have one article I agree with, I believe its article #173 or CSS sprites; no hacks, just good clean CSS and markup.

I challenge anyne to have a <ul> based inline menu with other <ul>s in the same page and not have it totally hose up in I.E. without resorting to some "hacK' to get the job done. Or show me a page where multiple <ul>s are used with an inline menu (again, no hacks) and I will succed from this debate. :wink:

Edited. Since I tend to use xHTML 1.1, the rules for markup and CSS engagement change. In a transitional setting this may not apply, but as web standards move forward, we will see stricter compliancy be thrown at us. Its best we learn these things instead of beating our heads against the walls wondering why this or that doesn't work in this or that browser. I.E. is the new NS4 as far as I am concerned.

In xHTML 1.1 the <ul> is further restricted and I.E. simply can't handle it right now. I use xHTML 1.1 on most my sites, with very few exceptions; the phpbb forum template I'm working on being one of those exceptions - xhtml 1.0 transitional; simply because the software wasn't really designed for a strict dtd environment.