...

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



Tanea
10-23-2006, 06: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, 07: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, 08:12 PM
Thanks for the fast reply but that doesn't change anything in Mozilla...

croatiankid
10-23-2006, 08: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)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum