CSS Problem with Firefox

Forum Moderators: open

Message Too Old, No Replies

CSS Problem with Firefox

Code is w3c valid, works fine in IE but not firefox

pizarn

11:26 pm on Sep 26, 2007 (gmt 0)

my site is seo friendly, still working on that which is not the problem right now anyway. My site is in *.htm1 it is w3c valid "This Page Is Valid HTML 4.01 Transitional!".

My right side box links look like this in IE:
Link1
Link2
Link3
Link4
Link5
LInk6

When its in Firefox it does this:
Link1 Link2 Link3 Link4 ---- then goes off the page.

Any idea what may be causing this.. Thats what i thought being w3c valid would stop from happening because im using perfect code, the css is vaild as well.

Marshall

2:13 am on Sep 27, 2007 (gmt 0)

pizarn,

You need to post relevant HTML and CSS to help solve this problem.

Marshall

pizarn

5:49 pm on Sep 27, 2007 (gmt 0)

Well the site is online already can i post external links to it?

Demaestro

5:57 pm on Sep 27, 2007 (gmt 0)

No you can't post links.... nice of you to ask many just do.

Just post the CSS that is used by the links and the html that the links are in..

Like are they in divs or uls, spans.....

It is likely that you are just experiencing different default behaviors.

For example in IE... text is aligned center in table cells.. In FF it is left.. it isn't that one doesn't work it is that one works differently by default.

pizarn

6:11 pm on Sep 27, 2007 (gmt 0)

Ok i tried to break it down as much as possible. Its a bit off but the looks pretty much the same. Looks way better with all the css code there. Works fine in Ie7 does what i wanted it to do. in FF 2.0.0.7 it does the what i explained in my first post anyway here is the code.

index.html

style2.css

body { background: #FFFFFF; color: #333333; font: 62.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; min-width: 780px; text-align: center; }
#content-b { float: left; font-size: 1em; width: 300px; background-color: #dddddd; margin: 0 0 3px 0; display: block; }
#content-b-inner { padding: 8px 18px 8px 18px; border-left: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black; display: block; }
#content-b-inner div { margin-bottom: .8em; }
#nav-bb { border-bottom: 1px solid black; display: block; }

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
display: block;
}

#nav-menu li
{
display: block;
}

#nav-menu li a
{
background-color: #FFFFFF;
height: 2em;
line-height: 2em;
float: left;
width: 26em;
display: block;
border: 0.1em solid #999999;
color: #333333;
text-decoration: none;
text-align: center;
}

#nav-menu li a:hover
{
text-decoration: none;
background: #999999;
}

pizarn

6:38 pm on Sep 27, 2007 (gmt 0)

Wow thx for the help any way guys. This was posted right when i was about to leave work, i had no brain power at that time. But anyway i figured out what my problem was

float: left;

how simple is that, its always something like that.

Thx for the quick replys tho..

Xapti

11:22 pm on Nov 1, 2007 (gmt 0)

you can keep the float there if you add a clear:left as well. (bah kidn of late reply :P)

[edited by: Xapti at 11:22 pm (utc) on Nov. 1, 2007]