css layout problem

Forum Moderators: not2easy

Message Too Old, No Replies

css layout problem

css ok in ie but messy in ff

yaaraer

8:20 pm on Nov 6, 2006 (gmt 0)

Well, after programming a website in asp.net and using alot of css for the design - i found out that in ie6 it looks ok but is messed up in ff. I read that the margins and such are calculated differently so i removed them but still its not ok.
The main weird part is: i use css menus with a bg image but image is clipped to the size of the text even though the width is bigger.
this is my code:

<div class="MainMenu" id="MainMenu">
<a class="MainItem" id="hlMain" href="Portal.aspx">main</a>
<a class="MainItem" id="hlSpecial" href="Portal.aspx">special</a>
</div>

with this css:

.MainMenu
{
background: white;
direction: rtl;
}
a.MainItem
{
width: 108px;
height: 20px;
background: url(images/MainButton.png) no-repeat;
text-decoration: none;
background-position: center;
display: inline;
color: Purple;
}

ps. what tags does ie show differently then ff and how can i make my site look ok in ff now?

Thanks for all the help.

Fotiman

8:42 pm on Nov 6, 2006 (gmt 0)

You really should try to develop for Firefox first, and then fix IE's bugs. Much easier than coding to IE's bugs, and then trying to make it look good in compliant browsers.

First, make sure you're using a complete DOCTYPE. This will force IE out of quirks mode, and it will be much easier to create a page that looks similar in both browsers:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

I'd start there.

Setek

1:39 am on Nov 7, 2006 (gmt 0)

I concur with Fotiman :) Develop in a standards-compliant browser first, so you can easily single out the IE bugs and work your way through it - rather than try and find either an IE bug or an incorrect way it's coded.

Now, the reason for your problem: you're setting an anchor to display inline, and then you're setting a width to that anchor. This works in IE why? Because it's incorrectly assigning width and triggering hasLayout on an inline element.

You can't put a width to an inline element, but you can to a block element. You'll need to change it to display as block, and then if you need it to sit "inline" next to something else, you'll have to float it :)

yaaraer

5:58 pm on Nov 7, 2006 (gmt 0)

hey setek, thanks for the straight to the point answer.
I already new i went about it the wrong way (the doctype and css behavior) when i looked for info on this problem so on my next project i'll be sure to use ff from the start.
Hopefully it will work out now.