Forum Moderators: not2easy
The coding looks great in IE, but horrible in Firefox. Yes, I know, I should have made it look correct in Firefox first before IE, but I didn't. I'll make sure to do that in the future.
If you look at the images I provided, you will see how the page is supposed to look, and how it looks with Firefox.
snip
This is my coding:
<style>
h1 {
border-top:0px;
border-bottom:0px;
border-right:120px solid #006666;
border-left:120px solid #006666;
background:#52cbd6;
color:#fff;
font-size:10pt;
text-align:center;
display:block;
width:500px;
padding:3px;}
a,tr,td,i,body,font,p,text,table,.content{
font-size:8pt;
font-family:Verdana;
text-align:center;}
b {color:#006666;font-size:8pt}
A:link, A:visited{
color:#52cbd6;}
A:Hover{
color:#006666;}
#main {
width:500px;
text-align:center;
background-color: #fff;
border-style: none;}
#content {width:1%;}
body{background:url(Lilypad_BG.gif) fixed;scrollbar-base-color:#e7c7e7;}
td img {border:0px}
.sidebar, #header, #footer, hr,
#ban_bottom, .ad_wrapper_fixed,.adbox2,.footOverlay,#ban{display:none;}
#navlist{width: 500px;margin: 0 0 0 ;padding: 0;}
#navlist a{width: 99%;display:block;background-color:#006666;text-align: center;text-decoration: none;color: #ffffff;font-family: Georgia ;font-size: 10px;}
#navlist a:hover { background-color: #00CCCC; }
</style>
Any ideas what I'm doing wrong?
[edited by: SuzyUK at 9:48 am (utc) on June 11, 2007]
[edit reason] No images/samples per guidelines [WebmasterWorld.com] [/edit]
Now I have a few things to discuss aside form that.
One thing: you may have done it, but you did not mention it. Make sure you have a proper doctype listed at the top of all your pages' code.
Second thing: 8 point font is ridiculously small. That's under 3 mm, if you didn't know. For paper that might be alright, but not for the computer screen. The smallest you should run is like 10pt.
There's also no point in having that 10px for the nav too, you should change it to point or em. Not only is it very small, but it can't be resized for IE (among other problems).
Just so you know, the scrollbar coloring attribute is proprietary to Internet Explorer, and your CSS will not validate to the W3C.
The 1% 99% width thing seems weird. I haven't seen the HTML so I don't know how things work out, but it seems strange. If it's parent width is 500px, then just set the other widths to pixels too (1% of 500 is 5px, 99% of 500px is 495 px). If it's parent's width is not specified, make sure you specify something that has 100% width, or a fixed width.
with regards to "a,tr,td,i,body,font,p,text,table,.content", it's not really necessary. Just set that info in the body, and all descendants of the body will inherit the text styling.
[edited by: Xapti at 4:11 am (utc) on June 11, 2007]
<style>
h1 {
border-top:0px;
border-bottom:0px;
border-right:120px solid #006666;
border-left:120px solid #006666;
background:#52cbd6;
color:#fff;
font-size:10pt;
text-align:center;
display:block;
width:500px;
padding:3px;}
a,tr,td,i,body,font,p,text,table,.content{
font-size:8pt;
font-family:Verdana;
text-align:center;}
b {color:#006666;font-size:8pt}
A:link, A:visited{
color:#52cbd6;}
A:Hover{
color:#006666;}
#main {
width:500px;
text-align:center;
background-color: #fff;
border-style: none;}
#content {width:1%;}
body{background:url(http://usera.example.com/Nevfalath/Lilypad_BG.gif) fixed;scrollbar-base-color:#e7c7e7;}
td img {border:0px}
.sidebar, #header, #footer, hr,
#ban_bottom, .ad_wrapper_fixed,.adbox2,.footOverlay,#ban{display:none;}
#navlist{width: 500px;margin: 0 0 0 ;padding: 0;}
#navlist a{width: 99%;display:block;background-color:#006666;text-align: center;text-decoration: none;color: #ffffff;font-family: Georgia ;font-size: 10px;}
#navlist a:hover { background-color: #00CCCC; }
</style>
<h1><marquee behavior="left" scrollamount="4">A Little Bit of Everything</marquee></h1>
<img src="http://usera.example.com/Nevfalath/QuiggleWelcome.gif"><p>
<table border="0" style="border-collapse: collapse" width="100%" id="navlist"><tr>
<td width="20%"><a href="/addpet.phtml?type=inventory">Create a Neopet</a></td>
<td width="20%"><a href="/petcentral.phtml?type=your">Pet Central</a></td>
<td width="20%"><a href="/explore.phtml">Explore</a></td>
<td width="20%"><a href="/gameroom.phtml">Games</a></td>
<td width="20%"><a href="/neomessages.phtml">Neomail</a></td>
</tr><tr>
<td width="20%"><a href="/objects.phtml?type=wizard">Shops</a></td>
<td width="20%"><a href="/neoboards.phtml">Boards</a></td>
<td width="20%"><a href="/nf.phtml">News</a></td>
<td width="20%"><a href="/stuff.phtml">Stuff</a></td>
<td width="20%"><a href="/help.phtml">Help</a></td>
</tr></table><br /><br /><p>
<h1>Welcome</h1>
<table width=500>
<tr><td>
Welcome to my shop and thank you for stopping in! We sell, well, the name of the shop says it all... a little bit of everything! Please come in and have a look around! I hope you find something to your liking!<p>
<img src="http://usera.example.com/Nevfalath/QuigglePlush.gif"><p>
Layout coding taken and editted from <a href="/~Ironyy" target="new">Aprils Coding Help</a>
</td></tr></table>
<h1>Items for Sale</h1>
I know HTML pretty well, and am somewhat familiar with CSS. I just don't understand how to make the page look nice on Firefox.
[edited by: jatar_k at 5:49 pm (utc) on June 12, 2007]
[edit reason] examplified [/edit]
Marquee isn't W3C valid (doesn't exist), it's proprietary tag developed by IE, and incorporated into a few other browsers. Highly unrecommended to use.
Lastly, your CSS doesn't match your HTML very well. There's many bits of CSS that aren't used in that HTML code. Just another reason to be rewriting the site.
[edited by: Xapti at 12:39 am (utc) on June 12, 2007]
I tried your code in IE and Firefox and the only difference was that nothing was centered in FF. My first thought is that you didn't include all the code - for example there is something with the id #main that has a text-align: center; in the CSS but nothing in the html with that id.
Where's the rest? What else is strange-looking for you?
Samuel
1 - Navlist sets a width of 500 in the style sheet yet the table that has this ID sets a width of 100%
2 - The bottom table states width=500....should be width="500" (could just be typo).
Will try the full code later and get back to you if not already solved.
Maquee is not a valid HTML tag. It was created by Microsoft a few years ago hoping that it would catch on & it never did. Finally, they are deprecating that tag
Although the marquee appears to work in FF it does appear slightly different.
You also have an issue with centering, resolved by using <center> after the body tag and before the nalist table (god knows why, I'll ask him later).
first off could you tell us what Doctype [webmasterworld.com] you're using, if any? - this alone might explain the box model (width) and centering differences
next the <marquee> shouldn't affect positioning or widths in non IE browsers, it just won't scroll
I also agree that there is unnecessary use of tables in this code, if anything the only thing that you might prefer to leave in a table is the #navlist, and if so a whole lot more of the sizing can be taken care of via the CSS to save having to redeclare the 500 width in so many places. the table cell widths can be set via the table-layout property too so you can actually reduce quite a bit of your HTML.
block level elements, h1, p etc.. automatically become 100% width of their parent so for example if you lose the table around your "welcome" section text and use <p>'s instead it will autofill.
Do you actually want the width to be 500px (including the borders) or is the width of the content area supposed to be 740px (which is the 500px width + 120px left border + 120px right border)
also I see CSS code for a #main div but no main div in the HTML I would in this case put a main/wrapper div around the whole code and put the width and white background color on this as it will aid in setting the width and centering the whole layout, regardless of Doctype
just some ideas
