Welcome to WebmasterWorld Guest from 54.159.165.175

Forum Moderators: not2easy

IE6 and N7 - DIV problems

   
5:28 pm on Mar 4, 2003 (gmt 0)

10+ Year Member



hello everyone!
I have very strange case. I use IE6 and NN7. I have to make a left menu column and content column. I made it very simple and easy for IE6 but for NN7 it's terrible.

I used
<style>
.main {height: auto; width: 100%;}
.menu {width: 180px;
float: left;
background-color: #eeeeee;
height: auto; }
.submenu { background-color: #eeeeee;
width: 180px;
eight: auto; }
.content {
margin: 0px;
padding: 20px 15px 20px 20px;
width: auto;
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
text-align: justify;
float: left;
position: relative;}
</style>

<div class="main">
<div class="menu">
<div class="submenu">item 1</div>
<div class="submenu">item 2</div>
<div class="submenu">item 3</div>
</div>
<div class="content">
<p>Content goes here...</p>
</div>
</div>

in IE6 i have menu button 180px wide, but in NN7 I have buttons 190px wide!

Help me please!

9:27 pm on Mar 4, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi microsup Welcome to WebmasterWorld! [webmasterworld.com]

I didn't run your code but I can't see anything that would cause that. How are you aware that it's 190px in NN7?

Nick

9:37 pm on Mar 4, 2003 (gmt 0)

10+ Year Member



Thank you.

I just put an image above the left column and saw that in N7 the menu buttons wider then image in IE6 the menu buttons exactly the same. After that I took a screenshot and measured the difference. And after that I change the CSS to 170 from 180 and saw that now in N7 perfect, but in IE6 it's on 10 pixels narrow.

And I tried to solve it different ways but still have no result.

9:49 pm on Mar 4, 2003 (gmt 0)

10+ Year Member



It seems to me I found the solution. It happened because i used { padding: 5 } in my menu items, without it it works fine, but how may I do padding now? do I have to do anothe style to applay for my menu items like <span style="padding: 5">text</span>

Any sugestions...

9:56 pm on Mar 4, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Ahhhhhh.... naughty naughty! - You left that bit out before ;)

IE6 gets it wrong by the look of it.

Why not try specifying your padding as a margin on the element like:

<div class="submenu"><div>blah blah</div></div>

.submenu div {
margin: 5px;
}

Try it, I've not tested it but the usual workarounds for this kind of IE nonsense are to apply things indirectly.

I'm sorry I don't have a better technical explanation for you, maybe someone else has the correct info?

Nick

10:14 pm on Mar 4, 2003 (gmt 0)

10+ Year Member



It helps but not exactly right ;)

Now i have perfect size, but I need to higlight the button. If I highlight it as is then i can see a margin around button, that's no good. I need to highlight entire button, so what i used padding instead margin.

Do you have more idea? or just go to my test website and see <snip>
And you may see another problem with DIV tag alignment. Use IE and NN to see the difference.

Thanks.

[edited by: Nick_W at 10:21 pm (utc) on Mar. 4, 2003]
[edit reason] Check sticky mail please [/edit]

11:01 pm on Mar 4, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



microsup

I ususally find it good practice to specify margin: 0px; and padding: 0px; on all elements as the different browsers have different ways of adding things on even if you don't require them, and I can't be bothered remebering which ones do what.. however I digress that's just a tip ;)

In this instance you've floated your left menu column and specified it's width:

.menu {
width: 180px;
float: left;
background-color: #eeeeee;
height: auto;
}

(as mentioned above I would add margin: 0px; padding: 0px; to that style to be sure that your column is indeed 180px available width)

now for your menu items you would not need to specify their width again just width: auto; so

.submenu {
background-color: #eeeeee;
width: 180px;
height: auto;
}

becomes:
.submenu {
background-color: #eeeeee;
width: auto;
height: auto;
margin: 0px;
padding: 0px; /*this can now be changed */
}

Now because the width of the .submenu is auto it will auto fill to width of the div it's inside which is the .menu which is 180px!,

You can now add padding to the submenu class without IE adding the 10px (5px x 2 left/right) padding to the actual width(180px) of the box, which is what was doing! When the width is auto it calculates what you want properly

Suzy
<sp>

5:39 pm on Mar 6, 2003 (gmt 0)

10+ Year Member



OK Thanks, that helps, not exactly right but anyway. In IE looks fine in N7 menu buttons higlighted not 180px wide, it just around text but with padding that's good.

Another problem is aqure, the left column and content box not in line. I mean left column has 180px wide and float to the left, the content column has auto.px wide and float left, but every time when content biger than one line the content box goes under menu column. In IE it looks fine, but in N7 every time wrong.

Do you guys know when Netscape will show web content the same as IE? It so stupid to waste time for porticipate in browsers war.

1:46 am on Mar 7, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



microsup, it's actually IE that have it wrong, and it could be a very long time before the browsers all become compatible..

in regard to your problem, the reason is that the left floated content section doesn't know how wide it should be so NN and probably others think it should be 100% wide..IE just presumes it knows what you want..

also note that the .submenu class is not actually required you can create the same effect and probably easier by styling the links in the .menu class
as explained by Nick in msg #8 [webmasterworld.com]

hope now helps
Suzy

[edited by: Nick_W at 10:46 am (utc) on Mar. 7, 2003]
[edit reason] Only recognized resources please [/edit]

3:11 pm on Mar 7, 2003 (gmt 0)

10+ Year Member



Thanks that helps. I found that when I use WIDTH in my .submenu a{...} it works fine in IE but not in NS7, if i remove WIDTH it works fine in NS but in IE i need to put my mouse over the text link and then my menu will highlited.

But anyway if You think that NS is a smart browser why NS shows block incorrect size. I mean if I have block 200px wide and padding 10px so the block should be 200px wide and space inside block should be 180px wide. RIGHT? NS goes another way.

4:23 pm on Mar 7, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



No microsup..

sorry I wish it were that easy it is a well know fact that it is IE that "misinterprets" the Box Model, well versions 5.5 and below although if you read the addendum at the bottom of the following article you will see it is also possible to get IE6 to act "quirky" too.

Here's a link [tantek.com] which may help to explain better than I can. It is about the "famous" box model hack, which took me ages to understand ;)

I'm not posting the link to advocate use of the hack, but the article does explain about how borders and padding should be rendered.

Perhaps it's a case for keeping the page fluid and not trying to make it "pixel perfect" which is where these bugs tend to rear themselves..

Suzy

4:39 pm on Mar 7, 2003 (gmt 0)

10+ Year Member



Thank you SuzyUK.
I will read that article. In my case i found the solution. And I did it exactly the same in IE and NS, but I had to use hack method. I just hided some rules from NS, and now it works fine in NS and IE.

Thank you guys for your help.

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month