PDA

View Full Version : layout works in IE, but not in Mozilla?



Tanea
10-23-2006, 07:46 PM
Hey there, I'm completely new to CSS, I'v worked with HTML before but just for the fun of it. I tried to make a layout for my weblog with CSS and it pretty much turned out the way I wanted it at least when I try to look at it with Internet Explorer. But with Mozilla Firefox it's completely wrong, nothing is where it should be and some stuff just doesn't work. I have no idea what's wrong about that and just thought someone might help me out? I'd really appreciate that.
It should be a page with two headres, several boxes with links and that kinda stuff on the right and on the left side and a box which goes over the complete width of the page at the bottom, surrounding the main part with my entries.
I took out most of the stuff which goes in the boxes so not to make this post any longer than it already is.
The stuff with the $ is just codes provided by Xanga, the place where I have my weblog... it will insert the posts I write everyday and that stuff.


So this is the html file:



<html>

<head>

<title>
My Weblog
</title>

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

</head>

<body>

<div class="top">
<h1>
big Header
</h1>

<h3>
small Header
</h3>
</div>


<div class="top2">
<div class="left">
<p>
last updated:
</p>
</div>

<div class="right">
<p>
<a href="http://www.xanga.com">Xanga</a>
- <$Private_Site_Tagline$> -
<a href="<$Signout_Link$>">Logout</a>
</p>
</div>
</div>



<div class="left">

<div class="box">
<div class="head">
<h2>
That's me...
</h2>
</div>
<p>
<img src="<$Profile_Pic$>"><br>
<$Profile_Info$><br>
<a href="<$Profile_Link$>"></a>
</p>
</div>

<div class="box">
<div class="head">
<h2>
Inside Links...
</h2>
</div>
<p>
Links
</p>
</div>

<div class="box">
<div class="head">
<h2>
Outside Links...
</h2>
</div>
<p>
Links
</p>
</div>

</div>



<div class="right">

<div class="box">
<div class="head">
<h2>
Latest News...
</h2>
</div>
<p>
News
</p>
</div>

<div class="box">
<div class="head">
<h2>
Daily Thoughts...
</h2>
</div>
<p>
whatever
</p>
</div>

<div class="box">
<div class="head">
<h2>
Currently...
</h2>
</div>
<p>
whatever
</p>
</div>

</div>



<div class="center">

<Xanga>
<p>
<Xanga_Date_Header>
<$Xanga_Date$>
</Xanga_Date_Header>
</p>

<p>
<$Xanga_Posts$>
</p>
</Xanga>

<div class="left">
<p>
<a href="<$Previous_Link$>" align="left"><< was war davor?</a>
</p>
</div>
<div class="right">
<p>
<a href="<$Next_Link$>" align="right">was kommt danach? >></a>
</p>
</div>

</div>



<div class="bottom">
<p>
some other links
</p>
</div>


</body>
</html>



And the external css file:



body {
background-color: #D7DFE7;
font-family: Verdana, Tahoma, Arial;
font-size: small;
color: #525252;
}

h1 {
font-family: Impact, Verdana, Tahoma, Arial;
font-size: 4em;
margin: 10px;
display: inline;
}

h2 {
font-weight: bold;
font-size: small;
padding: 5px;
margin: 0px;
}

h3 {
font-weight: bold;
font-size: 2em;
display: inline;
}

p {
margin: 5px;
}

a:link {
color: #666699;
text-decoration: underline;
}
a:visited {
color: #666699;
text-decoration: underline;
}
a:hover {
color: #666699;
text-decoration: none;
}
a:active {
color: #666699;
text-decoration: underline;
}


div.top {
width: 100%;
top: 5%;
margin-bottom: 10px;
background-color: #879FB7;
border: #525252 solid 2px;
}

div.top2 {
width: 100%;
margin-bottom: 10px;
background-color: #AFBFCF;
border: #525252 solid 1px;
}

div.left {
float: left;
background-color: transparent;
}

div.right {
float: right;
background-color: transparent;
}


div.box {
width: 180px;
margin-bottom: 10px;
background-color: #AFBFCF;
border: #525252 solid 1px;
}

div.center {
margin-left: 190px;
margin-right: 190px;
margin-bottom: 20px;
padding: 0px;
background-color: #AFBFCF;
border: #525252 solid 1px;
}

div.bottom {
width: 100%;
clear: both;
bottom: 5%;
background-color: #879FB7;
border: #525252 solid 1px;
text-align: center;
}

div.head {
background-color: #879FB7;
}

haveacigar
10-23-2006, 08:22 PM
in the css classes you dont need the div.class, you just need .class

example

html
<div class="container">blah blah</div>

css

.container {
width:120px;
}


so just change your css to this



body {
background-color: #D7DFE7;
font-family: Verdana, Tahoma, Arial;
font-size: small;
color: #525252;
}

h1 {
font-family: Impact, Verdana, Tahoma, Arial;
font-size: 4em;
margin: 10px;
display: inline;
}

h2 {
font-weight: bold;
font-size: small;
padding: 5px;
margin: 0px;
}

h3 {
font-weight: bold;
font-size: 2em;
display: inline;
}

p {
margin: 5px;
}

a:link {
color: #666699;
text-decoration: underline;
}
a:visited {
color: #666699;
text-decoration: underline;
}
a:hover {
color: #666699;
text-decoration: none;
}
a:active {
color: #666699;
text-decoration: underline;
}


.top {
width: 100%;
top: 5%;
margin-bottom: 10px;
background-color: #879FB7;
border: #525252 solid 2px;
}

.top2 {
width: 100%;
margin-bottom: 10px;
background-color: #AFBFCF;
border: #525252 solid 1px;
}

.left {
float: left;
background-color: transparent;
}

.right {
float: right;
background-color: transparent;
}


.box {
width: 180px;
margin-bottom: 10px;
background-color: #AFBFCF;
border: #525252 solid 1px;
}

.center {
margin-left: 190px;
margin-right: 190px;
margin-bottom: 20px;
padding: 0px;
background-color: #AFBFCF;
border: #525252 solid 1px;
}

.bottom {
width: 100%;
clear: both;
bottom: 5%;
background-color: #879FB7;
border: #525252 solid 1px;
text-align: center;
}

.head {
background-color: #879FB7;
}

Tanea
10-23-2006, 09:12 PM
Thanks for the fast reply but that doesn't change anything in Mozilla...

croatiankid
10-23-2006, 09:51 PM
it's a ton easier coding for firefox first, then fixing IE bugs (if your code works in firefox, it will almost definately work in all browsers except IE)