Forum Moderators: not2easy
first of all I have to make a confession:
During development I previewed my website using IE only. That was probably a really bad idea, but it's my first real hand-coded website (HTML, CSS, a little PHP).
Anyway, now that the site is near completion I downloaded FireFox to preview the layout. And, oh my gosh, it looks... bizarre, one could say. Most stuff is wrongly formatted.
For some reason, not even background-colors work. Maybe that has something to do with the z-index I used?
I feel really gloomy right now, so I hope somebody can cheer me up by telling me what went wrong.
The HTML (4.01 transitional) and CSS are valid, checked that.
My CSS is a bit all over the place, so I'll include the important parts below (the parts where problems occured).
CSS
body
{
background-color: #4C4C4C;
text-align: center;
padding: 8px 0px 8px 0px;
margin: 0px;
}
.wrapper
{
width: 672px;
margin: 0px auto 0px auto;
background-color: #2F3030;
border-style: solid;
border-width: 2px;
border-color: #000000;
text-align: left;
}
.header img
{
margin: 4px 3px 4px 3px;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
width: 664px;
height: 79px;
display: block;
}
.nav {
width: 672px;
height: 24px;
padding: 1px 0px 1px 0px;
background-image: url("bg.gif");
background-repeat: repeat;
}
.nav ul
{
list-style: none;
}
.nav li
{
margin: 0 3.5% 0 3.5%;
float: left;
}
.nav li a
{
font-family: Arial,sans-serif;
font-size: 10pt;
color: #FFFFFF;
text-decoration: none;
letter-spacing: 1px;
}
.mainwrap
{
width: 672px;
background: url(bg.jpg) repeat-y;
z-index: 0;
}
.content
{
width: 474px;
padding: 25px 25px 5px 25px;
z-index: 1;
float: left;
.sidebar
{
float: right;
width: 148px;
z-index: 1;
padding-bottom: 15px;
}
HTML
<body>
<div class="wrapper">
<div class="header">
<IMG src="header.jpg" alt="" />
</div>
<div class="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
<div class="mainwrap">
<div class="content">
TEXT
</div>
<div class="sidebar">
TEXT
</div>
</div>
</div>
</body>
To list some problems, here we go:
- background of mainwrap not shown (bg image for 2-column layout)
- the wrapper border does not enclose everything (header, nav, content and sidebar), just header and nav
- nav links are all over the place (maybe because of percentage margins?), they overflow the menu and are not centered
I'd really appreciate some help!
Cheer me up, people ;-)!
Lupi
Lets see ... first off what doctype are you working off of? HTML 4, XHTML? Transistional or strict? You also forgot to post your charset which tells the browser what set of language characters you're using.
Next off even though not even a tenth of a percent of users use 640x480 if you're going to set the width of anything static do not go over 640 if you can help it. At 670 or so you should be kind enough to not force those poor folks on p133s with 16 mb of ram to have a horizontal scrollbar on their 14 inch screens. ;-)
Ok now down to buissness...
You're using bullets for your menu? Hmmm, very odd but hey you're experimenting and I've been down that path IoI...
I've NOT seen a horizontal bullet layout.
Here is what I've done with the code I'm giving you...
I've just put the CSS in the page just so you can just copy, paste, tweak from there. For someone just starting to play with the code raw I applaud you for being way ahead of the game for using CSS.
I've replaced your bulleted list with floating divs. The menus are 100px wide divs and it works fine in both Gecko browsers like Firefox and IE.
If you'd like to make the menus cross-browser with minimal work/code to have rollovers let me know.
You're also welcome to rip the client side code from my website, my directories are all open. Link in my profile.
Also, use [ quote ] and [ / quote ] around the code as it's a little cleaner :-)
<html>
<head>
<style>
div.menu1, div.menu2, div.menu3, div.menu4, div.menu5 {
border: 1px solid #f00;
float: left;
width: 100px;
}body
{
background-color: #4C4C4C;
text-align: center;
padding: 8px 0px 8px 0px;
margin: 0px;
}
.wrapper
{
width: 672px;
margin: 0px auto 0px auto;
background-color: #2F3030;
border-style: solid;
border-width: 2px;
border-color: #000000;
text-align: left;
}
.header img
{
margin: 4px 3px 4px 3px;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
width: 664px;
height: 79px;
display: block;
}
.nav {
width: 672px;
height: 24px;
padding: 1px 0px 1px 0px;
background-image: url("bg.gif");
background-repeat: repeat;
}
.nav ul
{
list-style: none;
}
.nav li
{
margin: 0 3.5% 0 3.5%;
float: left;
}
.nav li a
{
font-family: Arial,sans-serif;
font-size: 10pt;
color: #FFFFFF;
text-decoration: none;
letter-spacing: 1px;
}
.mainwrap
{
width: 672px;
background: url(bg.jpg) repeat-y;
z-index: 0;
}
.content
{
width: 474px;
padding: 25px 25px 5px 25px;
z-index: 1;
float: left;
.sidebar
{
float: right;
width: 148px;
z-index: 1;
padding-bottom: 15px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<IMG src="header.jpg" alt="" />
</div>
<div class="nav">
<div class="menu1">Link</div>
<div class="menu2">Link</div>
<div class="menu3">Link</div>
<div class="menu4">Link</div>
<div class="menu5">Link</div>
</div>
<div class="mainwrap">
<div class="content">
TEXT
</div>
<div class="sidebar">
TEXT
</div>
</div>
</div>
</body>
</html>
first of all thank you for your help!
I'm not trying to use bullets for the navigation,
list-style:none is set. I then used float:left
to change a list of links, e.g.
- Link1
- Link2
- Link3
to
Link1 Link2 Link3
That's my horizontal menu (without padding, colors, etc).
That worked in IE, and it works in FireFox, only that in FireFox the links are neither centered nor inside the nav div (they kinda overflow). That's the first problem.
Second big problem is the background image, which is not displayed in FireFox for whatever reason.
Charset: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
HTML 4.01 Transitional
That really sucks. Everything looks so neat in IE, but the layout just doesn't work in FireFox. And I thought it was the IE that breaks ranks...
- Lupi
1. Menu (.nav) is not correctly displayed, i.e. not inside the .nav div or only partly visible (overflow/underflow)
2. Background image is not displayed
Tested on WinXP, HTML + CSS is validated
IE: no problems, everything looks perfect
FireFox 1.01: problems 1 and 2
Opera: problem 1 only
Netscape 7.02: same as FireFox, naturally
The parts of the code that seem to be affected:
.nav {
width: 672px;
height: 24px;
padding: 1px 0px 1px 0px;
background-image: url("bg.gif");
background-repeat: repeat;
}
.nav ul
{
list-style: none;
}
.nav li
{
margin: 0 3.5% 0 3.5%;
float: left;
}
.nav li a
{
font-family: Arial,sans-serif;
font-size: 10pt;
color: #FFFFFF;
text-decoration: none;
letter-spacing: 1px;
}
.mainwrap
{
width: 672px;
background: url(bg.jpg) repeat-y;
z-index: 0;
}
.content
{
width: 474px;
padding: 25px 25px 5px 25px;
z-index: 1;
float: left;
.sidebar
{
float: right;
width: 148px;
z-index: 1;
padding-bottom: 15px;
}
<body>
<div class="wrapper">
<div class="header">
<IMG src="header.jpg" alt="" />
</div>
<div class="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
<div class="mainwrap">
<div class="content">
TEXT
</div>
<div class="sidebar">
TEXT
</div>
</div>
</div>
</body>
So you will only see minor differneces in Netscape and Firefox.
Netscape 4 is based on Mosaic (and so is IE).
Firefox doesn't have any issue. It's doing EXACTLY what you're telling it to do. Internet Explorer has a knack for making you think you've coded something correctly and will interpret junk or whats technically referred to as quirks mode just fine.
But thats the issue with IE. It renders quirk code much better then it renders W3 compliant code.
The issue you're facing is that you developed this in IE and then looked in Firefox. You need to do the opposite because the W3 is right regardless of how much $ MS has.
MS will render W3 compliant pages fine for the most part until you get your hands really dirty IoI.
I'd take a much deeper look but my time is short before I leave for the weekend.
Play around with the code and post what you get anytime this weekend once you have it working in both browsers.
And please do us a favor and just post the full document like I did. Posting only the body and not including the doctype...well...
If you don't include a doctype then all browsers will render your quirk code however they feel is best. This will result in two browsers possibley not agreeing on how to render the same code.
I HIGHLY doubt right now this is your issue BUT still emphasize that you post the full doc (including nthe css in the header please).
Try approaching your layout my way or a different way if you're not getting this to work. DIVs and floats will work fine if you keep the basic idea that table cells have.
I look forward to seeing your results :-)
Fact is that the complete code is W3 compliant/validated and works fine in IE, not in FireFox.
But alright, I won't blame it on FireFox ;-)...
I checked the HTML itself by excluding the stylesheet, looked exactly the same in IE and FireFox (as one would expect).
So it has to be the CSS.
The menu now works, I added
margin: 0px;
padding: 0px;
to .nav ul! Now it works in IE, FF, OP and NN! Yeah :-)!
Furthermore, I think that I'm about to figure out the second problem (background not showing).
I want the main/content part of the site to have a two column layout, so I'm using a two column (i.e. two colours) background image. Naturally, I want the two columns to have a fluid height, depending on how long the text is. Thanks to the bg image, both columns will have the height of the longest one. Thus, I did not specify height in the stylesheet.
Then, I set height: 2000px (arbitrary value) for both wrappers. Works for all browsers, great!
Only that I do not want to specify the height for every single page. So I tried height: auto, doesn't work.
.wrapper
{
width: 672px;
margin: 0px auto 0px auto;
background-color: #2F3030;
border-style: solid;
border-width: 2px;
border-color: #000000;
text-align: left;
}
What can I do?
If I don't specify the height of the wrapper, FF/NN break it off after the header/menu (which has a specified height) and do not include the content (which has no specified height).
- Lupi
