homepage Welcome to WebmasterWorld Guest from 54.161.228.29
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE6 and N7 - DIV problems
microsup




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

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!

 

Nick_W




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

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

microsup




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

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.

microsup




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

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...

Nick_W




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

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

microsup




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

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]

SuzyUK




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

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>

microsup




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

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.

SuzyUK




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

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]

microsup




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

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.

SuzyUK




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

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

microsup




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved