CSS border doesnt display the same in FF and IE

Forum Moderators: open

Message Too Old, No Replies

CSS border doesnt display the same in FF and IE

Not sure the name for the problem

Skuggi

2:15 pm on Feb 11, 2005 (gmt 0)

Ok, since even my professor dont know whats up with this, this looks like a good place to ask this.

If you look at the menu on my site here
<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

its border is different in the two browser but the whole thing is still CSS and XHTML compliant. How can I get the boxes to still display right in FF?

[edited by: tedster at 4:08 pm (utc) on Feb. 11, 2005]

lammert

2:39 pm on Feb 11, 2005 (gmt 0)

First of all welcome to WebmasterWorld!

As you might not have read the TOS, it is not allowed to post URLs of your own sites.

IE and FireFox both use the same CSS standard, but they interpret things differently. Especially the default values for borders, background colors etc. is different. The best you can do is specify everything which you think is necessary in your CSS defintion, like margin sizes, background colors etc.

If your border doesn't display right, identify which container it is in: <body>, <table> etc. Than add

body {
background: ...;
margin: ...;
}

or a similar statement to your CSS. You can use a search engine and search for "CSS quick tutorial" or something similar. There are many websites that contain good explanations of CSS.

For more questions you can also visit the CSS forum at [webmasterworld.com...]

Skuggi

2:52 pm on Feb 11, 2005 (gmt 0)

sorry bout that I dont read TOS's they'er almost always the same thing for forums, I normally look for a stickied rules post. The CSS I am using for that is.

A:Link.navbar {
cursor: crosshair;
color: blue;
text-decoration: none;
border: 1px solid blue;
margin-right: 88px;
width: 88px;
}
A:Visited.navbar {
cursor: crosshair;
color: blue;
text-decoration: none;
border: 1px solid blue;
width: 88px;
margin-right: 88px;
}
A:Hover.navbar {
cursor: crosshair;
color: #00ff00;
text-decoration: none;
border: 1px solid #00ff00;
width: 88px;
margin-right: 88px;
}

I'm not sure if I'm using the margin right or not.

tedster

4:27 pm on Feb 11, 2005 (gmt 0)

Since you say the mark-up is valid, I have a suspicion - you may be running into a quirks mode vs. standards mode [webmasterworld.com] issue - and in most cases, Firefox will get the rendering correct but our instincts have been corrupted by Explorer's common disregard for the W3C.

Quick test - remove the DTD from your html and see how the page renders.

My guess is that IE is rendering the border around your <a> elements as if they are block level instead of inline elements. Putting FireFox into quirks mode by removing the DTD should also show the same non-standard rendering.