List of Links in IE and Mozilla 1

[purpleski]

Hi

I have some links in page in the left had column which can be viewed at

http://www.purpleski.com/Main.htm.

These render beautifully in IE6, IE5 and degrade nicely in IE4 but in Mozilla 1.5 the buttons all overlap each other. The buttons are as below:

<a class=&quot;lcbutton&quot; href=&quot;../../availability/index.htm&quot;>Availability</a><br>
<a class=&quot;lcbutton&quot; href=&quot;../../prices/index.htm&quot;>Prices</a><br>

etc

The CSS can found at

http://www.purpleski.com/styles/lcol.css.

How can I layout the buttons so that they render correctly in both browsers? Is the only way with a div tag for each button?

By the way if you have not tried mozilla you should give it a try - I think I may be a convert it is lovely to use!

Thanks.

 

[Vragabond]

Hi,

not good to rely on line breaks to line up your menu. Do it like this:

CSS:
A.lcbutton:link, A.lcbutton:active, A.lcbutton:visited {
display:block;
margin-top: 5px;
background-color: #660066;
border: 2px outset #CC00CC;
color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
height: 17px;
padding: 2px 5px 2px 5px;
text-align: left;
text-decoration: none;
width: 89px; /*63px;*/
}

A.lcbutton:hover {
background-color: #9900CC;
border: 2px outset #CC00CC;
color: #330033;

And in the code take out the <br />s at the end of the lines. Should render perfectly in Mozilla, IE and Opera. Also note that I took out much of the stuff from the :hover pseudo class. What you are not changing, you do need to repeat, the values are inherited from the :link class. This way the code looks cleaner. Hope it helps.

 

[purpleski]

Vragabond

You do it again - an excellent tip. In fact to make it render nearly the same in Mozilla as in IE6 I have removed the height tag as mozilla did not seem to display correctly. The buttons' height was too great.

I say nearly because the border colour displays strangely and the width of the buttons are about 20% wider under Mozilla than under IE6. Are size type elements - width, height, left, right etc handled differently under the two browsers? Should I be using em and not px as the unit?

Thanks again.

A.lcbutton:link, A.lcbutton:active, A.lcbutton:visited {
display:block;
margin-top: 5px;
background-color: #660066;
border: 2px outset #CC00CC;
color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
height: 17px;
padding: 2px 5px 2px 5px;
text-align: left;
text-decoration: none;
width: 89px; /*63px;*/
}

A.lcbutton:hover {
background-color: #9900CC;
border: 2px outset #CC00CC;
color: #330033;
}

 

[Vragabond]

I think the problem is padding. IE understands width of an element as specified in the width: .. while Mozilla does it by calculating width and padding. Thus, the difference.

 

[purpleski]

Thanks.

Is there a way around this problem? Can I make Mozilla visitors use one style sheet and IE visitors another? Though I would prefer to use the same style sheet.

Thanks.

 

[philote]

http://www.tantek.com/CSS/Examples/boxmodelhack.html

Kevin
A+, Network+, MCP

 

[purpleski]

Thanks but this does not seem to work. I tried this but it does not seem to work.

Is there a way of loading a style sheet depending on what browser is viewing the page?

Thanks.

Michael.

 

[purpleski]

Sorry also I should have added that it is not just a question of the box model. Have a look at the positioning of the buttons in IE and in Mozilla. They way I have it set up at the moment they are perfect in IE6 but not in Mozilla and vica versa.

http://www.purpleski.com/Main.htm.

For example the contact button is positioned with div

#divContact{
left: 20px;
position: absolute;
top: 41px;
}

Ahha this is doing my head in

Any thoughts.

 

[philote]

I was able to fix the positioning of those buttons in at least Mozilla by setting the <a> to display: block, but I didn't get to try it out in IE. Btw, if you haven't used Mozilla's DOM Inspector I suggest you do. It's very handy to see what elements got what style and exactly where they are on the page.

What results did you get when you applied the fix I posted? I ask because it looks to me like the menu buttons are around 14px bigger in Mozilla, the sum of left and right margins and left and right borders.

But if you still want to have a seperate stylesheet for each browser, you can do this with javascript. Search around.. I found something but I'm not good with javascript so I don't know how well it will work:

http://www.scriptygoddess.com/archives/001155.php

Kevin
A+, Network+, MCP

 

[purpleski]

Hi

Thanks for that. I set <a> to display: compact and that seem to work. <a> to display: block in ie did not work.
I will give it a try with javascript and have a look at me

http://www.scriptygoddess.com/archives/001155.php.

I have to say that after only three days of having a look at Mozilla it strikes me that using pure CSS and making a site render in IE and Mozilla is a fruitless task. Because of the fact Microsoft does not comply with the standards or the rest of the world is not prepared to accept that IE is THE standard whether we like it or not.

But I will keep working on it. May be I can crack this Box Model Hack

Any other help of course welcome.