...

View Full Version : First CSS site, works in IE, not in FF?



Odoaker
02-03-2005, 03:57 PM
Ok this is my first try, me and a couple of guys are going to start this weblog, and I've been busy CSSing it and stuff, and now I almost have it right, except for one thing: in Firefox the 2 "nav" and "main" div boxes I created inside my "outer" containing div box, are placed outside of the "outer" box.

Check this site with Firefox and note the difference with IE.

http://www.panzerfaust.org/weblog/

*oh yeah, the site name is panzerfaust, but only after registering it I found out that the .com version was taken my some neonazi record label. Just in case anyone thinks I'm a nazi: I'm not.

Any ideas? This is the CSS code, theres some stuff from the default pivot CSS file I left in cause I dont want to mess up, any of you guys see something?
----------------------------------


a:link { color: #000000; text-decoration: none }
a:visited { color: #8D746E; text-decoration: none }
a:hover { text-decoration: none; color: #E8270F }
a:active { text-decoration: none; color: #ff0000 }





body {
margin: 0px;
padding: 0px;
background-color:#8D746E;
font-size:12px;
font-family:Palatino Linotype;
}

body, p, html, table, td {
font-family:Palatino Linotype;
font-size: 12px;
}

.pivot-image {
/* style for images in entries */
}

.pivot-popupimage {
/* style for popup-images in entries (thumbnails) */
}

.pivot-popuptext {
/* style for popup-images in entries (textual links) */
}

.registered {
background-color: #ff9;
}

#outer {
width: 760px;
background-color:#F8EEDF;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}

#header {
width: 760px;
padding: 20px;
font-size: 12px;
text-align: center;

}

#main {
right: 0px;
float: right;
width: 500px;
font-size: 14px;
padding: 20px;
}

#nav {
width: 150px;
padding: 20px;
font-size: 10px;
left: 0px;
float: left;
}





.entrycontent {
padding: 12px;
}

.entryheader {
padding: 12px;
}

.archiveheader {
padding: 12px;
}

.content p {
margin: 4px 2px 4px 2px;
}

h1 {
font-size: 11px;
margin: 4px;
display: inline;
}

h2 {
font-size: 12px;
border-bottom:1px dashed #999;
margin:0px;
padding: 2px;
}

h3 {
font-size: 14px;
}

h4, .subtitle {
font-size: 16px;
margin: 4px;
display: inline;
font-style: italic;
}

.date {
color: #666;
font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
font-size: 10px;
line-height: 16px;
font-weight: normal;
float: right;
}

.date_linkdump {
color: #666;
font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
font-size: 10px;
line-height: 16px;
font-weight: normal;
float: right;
}

.entryfooter {
color: #666;
font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
font-weight: normal;
text-align:right;
margin: 0px;
padding: 6px 0px;
clear: both;
}

.entryfooter_linkdump {
color: #666;
font-family: tahoma, verdana, geneva, arial, helvetica, sans-serif;
font-size: 10px;
line-height: 16px;
font-weight: normal;
text-align:right;
margin: 0px;
padding: 6px 0px;
border-bottom: 1px dashed #666;
}

.entryfooter a, .date a, .entryfooter_linkdump a, .date_linkdump a {
text-decoration: none;
font-weight: bold;
}

.entryfooter a:hover, .date a:hover {
text-decoration: underline;
font-weight: bold;
}

a {
color: #253a69;
}

.prevnext_links {
float: right;
}

h1 a, .prevnext_links a {
font-weight: bold;
text-decoration: none;
}

h1 a:hover, .prevnext_links a:hover {
font-weight: bold;
text-decoration: underline;
}

/* these styles are for the search boxes */
.searchbox {
width: 10em;
font-size: 9px;
}

.searchbutton {
border: 1px solid #000;
font-size: 10px;
}

/* ACCESSIBILITY CHANGES - JM 2004/11/26 */
/* these hide the accessibility tags to stop the layout from changing */

.pivot-search label { visibility:hidden; display:none; }
.pivot-search legend { visibility:hidden; display:none; }
.pivot-search fieldset { border:0; padding:0; margin:0; }

.pivot-search-result label { visibility:hidden; display:none; }
.pivot-search-result legend { visibility:hidden; display:none; }
.pivot-search-result fieldset { border:0; padding:0; margin:0; }

/* this replaces inline style tags */
img.badge { border:0; margin-bottom:2px; }

/* this is a bonus */
a img.badge:hover { border-bottom:1px #314e8c solid; margin-bottom:1px; }

macmonkey
02-03-2005, 04:28 PM
I've posted about a similar problem... if I get anywhere I'll let you know... Things look fine in IE and Safari but FF isn't coming through...

Odoaker
02-03-2005, 05:20 PM
yeah ive been fooling a bit atound, cant seem to help

but it does seem to be a problem with the whole floating thing: IE stretches out the "outer" div block so that everything is inside, whether floating or not. FF doesnt seem to consider the fact that the floating blocks are found inside the "outer" div, and just places them like they were found AFTER the outer div, in stead of in it...

still no one?

Odoaker
02-03-2005, 05:26 PM
hmm either way its wrong, if i let go of the double floating properties and only let the left nav bar float, like i read everywhere, it still aint working in FF. Ok, all the text is inside the outer container box this time, but...

Now FF places the "main" content div to the lower right bottom of the "outer" containing div, while there is plenty of space to place it immediately to the right of the nav bar, which it does in IE.

macmonkey
02-03-2005, 05:35 PM
haha... I miss tables... :D

Odoaker
02-03-2005, 06:35 PM
yeah and I miss frames... :)

mcdougals4all
02-03-2005, 06:43 PM
I sympathize, the transition can be painful but the benefits are worth the effort.

Whatever problems you run into, try searching the forums. It's likely someone else has run into the same issue.

And if you don't find the answers there keep posting for help. Good luck.

rmedek
02-03-2005, 10:28 PM
First of all, IE is all that's wrong with the web. When you're coding, try coding to standards first (read: code for Mozilla), then fix all the little hacks here and there to get it working in IE, rather than the other way around.

Next, when you float an object, you take it "out of flow." So the "main" div, when it has been told to clear (you have "clear: both" on your <h2> tags in the "main" div) will wrap to where it would have been normally. It'll essentially ignore the float at that point. If you're trying to do a column layout, it might be easier to use relative positioning.

I know you're not after a three column layout per se, but here's a good link to see how others are positioning their layouts:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

And a nice tutorial on floats:

http://css.maxdesign.com.au/floatutorial/

Hope this helps,

Crewcut
02-04-2005, 02:55 PM
Check this site with Firefox and note the difference with IE.

http://www.panzerfaust.org/weblog/



I tried, but i get a 404-error unfortunately.

Couldn't resist to peek in the source code of the main page though and i noticed the following:



<link rel="stylesheet" type="text/css" href="panzerfaust_site_styles.css" />


I guess you are not aware of this, but some browsers don't like the fact that the css file name is written with underscores. Try using " - " instead of " _ "
Same goes for class or id names. Example: body._classname is being ignored by some browsers.

Crewcut
02-04-2005, 03:46 PM
Not sure if this is the solution you want, but anyways its nice to see how i made it alltogether :)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Homepage</title>
<style type="text/css">
body {
padding-right:0px;
padding-left:0px;
padding-top:20px;
padding-bottom:20px;
margin:0px;

}
div#outer {
position:relative;
width: 760px;
height:700px; /* if you dont set a height, it won't work */
background-color:#F8EEDF;
margin-right:auto;
margin-left:auto;
padding: 0px;
border: solid 1px #000000;
}

div#outer div#header {
position:relative;
background-color:Silver;
width: 720px;
padding: 20px;
font-size: 12px;
text-align: center;
top:0px;
}

div#outer div#content {
position:relative;
background-color:#c2c2c2;
}

div#content div#main {
background-color:maroon;
color:Silver;
position:absolute;
top:10px;
left: 260px;
width: 460px;
font-size: 14px;
padding: 20px;
}

div#content div#nav {
background-color:maroon;
color:Silver;
position:absolute;
width: 110px;
padding: 20px;
font-size: 10px;
left: 0px;
top:10px;
}
</style>
</head>
<body>

<div id="outer">
<div id="header"><strong>HEADER</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut neque. Ut a erat eu lacus sodales feugiat. Etiam euismod ipsum ut erat. Morbi odio tellus, pretium non, porta eu, convallis eu, risus.</div>
<div id="content">
<div id="main"><strong>MAIN</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut neque. Ut a erat eu lacus sodales feugiat. Etiam euismod ipsum ut erat. Morbi odio tellus, pretium non, porta eu, convallis eu, risus. Nam bibendum lectus ut metus. Aliquam id ipsum. Pellentesque turpis eros, cursus commodo, porttitor eu, dignissim in, dolor. Suspendisse accumsan, pede ac pellentesque aliquet, nibh enim commodo orci, nec volutpat neque justo vitae velit. Sed vehicula. Aenean urna neque, sollicitudin sit amet, nonummy nec, facilisis in, sem. In eget ipsum quis ligula interdum porttitor. Suspendisse rhoncus pulvinar felis. Donec eu est.
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut neque. Ut a erat eu lacus sodales feugiat. Etiam euismod ipsum ut erat. Morbi odio tellus, pretium non, porta eu, convallis eu, risus. Nam bibendum lectus ut metus. Aliquam id ipsum. Pellentesque turpis eros, cursus commodo, porttitor eu, dignissim in, dolor. Suspendisse accumsan, pede ac pellentesque aliquet, nibh enim commodo orci, nec volutpat neque justo vitae velit. Sed vehicula. Aenean urna neque, sollicitudin sit amet, nonummy nec, facilisis in, sem. In eget ipsum quis ligula interdum porttitor. Suspendisse rhoncus pulvinar felis. Donec eu est.

</div>
<div id="nav"><strong>NAVIGATION</strong><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ut neque.</div>
</div>
</div>

</body>
</html>





Have fun
Veel plezier ermee :)

Greetz,
Crewcut



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum