homepage Welcome to WebmasterWorld Guest from 54.167.144.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Browsers / Firefox Browser Usage and Support
Forum Library, Charter, Moderators: incrediBILL

Firefox Browser Usage and Support Forum

    
New to FF - don't want to use tables.
Firefox Tables CSS
ThatWouldBeTelling

5+ Year Member



 
Msg#: 473 posted 11:37 am on Jun 29, 2006 (gmt 0)

I have designed a page which renders perfectly in IE6 and validates to 4.01 but in Firefox the box in which the main text is held does not adjust to fit the text. As a result, the main text continues over the panel below, rendering it unreadable.

I am new to CSS and thought once I'd got the IE right the rest would be plain sailing - obviously not.

Any suggestions would be really appreciated ;-)

[edited by: encyclo at 1:55 pm (utc) on June 29, 2006]
[edit reason] no personal URLs please, see forum charter [/edit]

 

topr8

WebmasterWorld Senior Member topr8 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 473 posted 11:39 am on Jun 29, 2006 (gmt 0)

opera too!

ThatWouldBeTelling

5+ Year Member



 
Msg#: 473 posted 1:47 pm on Jun 29, 2006 (gmt 0)

Thought it might be useful to post the css:

body {
font-family: "Georgia", "Times New Roman", verdana, lucida, arial, helvetica, sans-serif;
font-size: 80%;
}
#container {
width: 673px;
margin: 0px auto;
}
#top {
color: #FFFFFF;
width: 221px;
height: 140px;
background-color: #ffffff
}
#topright {
float: right;
height: 140px;
width: 447px;
text-align: right;
}
.cl {
clear:both;
}
#gallery {
width: 673px;
}
#news {
width: 213px;
height: 372px;
margin-top: 5px;
background-color: #FF9933;
color: #FFFFFF;
padding: 4px;
}
#menu {
width: 422px;
background-color: #FF9933;
padding: 13px;
border-bottom: 5px solid #FFFFFF;
float: right;
}
#menu a:link, #menu a:visited, #menu a:active {
background-color: #FF9933;
padding: 13px;
text-decoration: none;
color: #000000;
}
#menu a:hover {
padding: 13px;
background-color: #F7CB33;
text-decoration: none;
color: #FFFFFF;
}
#content {
width: 446px;
float: right;
height: 380px;
margin-top: 5px;
background-color: #FFFF99;
}
p {
margin: 0 0 0 0px;
line-height: 180%
}
h1 {
padding: 4px;
margin: 4px;
font-size: 120%;
font-weight: bold;
color: #FFFFFF;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #F7CB33;
}
h2 {
text-align: center;
font-size: 300%;
font-weight: normal;
color: #FFFFFF;
}
#pad {
padding: 12px;
color: #000000;
}
#footer {
background-color: #Ff9933;
padding: 12px;
width: 649px;
color:#000000;
font-size: 90%;
text-align: center;
clear:both;
border-top: 5px solid #FFFFFF;
}
#footer a:link, #footer a:active, #footer a:hover, #footer a:visited {
color:#000000;
}
h4 {
font-size: 180%;
line-height: 90%;
color: #400000;
}
h6 {
font-size: 90%;
color: #F01E1E;
}

asquithea

10+ Year Member



 
Msg#: 473 posted 6:06 pm on Jun 29, 2006 (gmt 0)

That height declaration on #content looks a tad suspicious.

[edited by: tedster at 10:33 pm (utc) on June 29, 2006]

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 473 posted 10:42 pm on Jun 29, 2006 (gmt 0)

I am new to CSS and thought once I'd got the IE right the rest would be plain sailing

Unfortunately, that isn't the case -- with either css or html. IE is the least standard of the main browsers.

I usually find it best to design for Firefox, Opera, or even Safari -- all of which are more compliant with standards today -- and then tweak for IE if necessary. The core code for IE 6 is pretty ancient, some of it written in the last century!

I find this approach is about twice as fast. Also, make sure you are using a full DTD so that the browsers are all displaying in standards mode. Otherwise, you can paint yourself into an impossible cross-browser corner. And as a routine, before trying to fix any rendering problems, always make sure your mark-up validates first.

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Firefox Browser Usage and Support
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