...

View Full Version : CSS help in Chrome



Tyler138
12-26-2009, 07:22 PM
Hey,
just finished getting the design/layout done for a site iam making, all works great in safari/firefox/ie.

but in chrome the first time i load the page the one div is dropped down about 100px's but when i hit refresh all is fine.

any ideas..?

Excavator
12-26-2009, 07:33 PM
Hello Tyler138,
It could be any number of problems, none of which would be even possible to guess without looking at some code or a link to the site.
A link is always best.

Tyler138
12-26-2009, 07:46 PM
Hello Tyler138,
It could be any number of problems, none of which would be even possible to guess without looking at some code or a link to the site.
A link is always best.

sorry havent got a link at the moment as it isn't published yet...

Html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>

<head>

<title> Welcome to Jack's School of Motoring </title>
<link rel="stylesheet" href="index.css">

</head>

<body>

<div class="container">

<div class="banner">

<a href="home.html">
<img src="images/JacksLogo.png">
</a>

<div class="contact">
<p> Phone - 00000 000000 <br/>
Mobile - 07000 000000 <br/>
Address 1, Address 2, <br/>
Postcode
</p>

</div> <!---contact--->

</div> <!---banner--->

<div class="navcontainer">
<ul class="nav">
<li><a href="home.html">Home </a></li>
<li><a href="services.html">Services </a></li>
<li><a href="prices.html">Prices </a></li>
<li><a href="contact.html">Contact </a></li>
</ul>
</div> <!---navcontainer--->

<div class="info">
<h1> Welcome to Jacks School of Motoring </h1>


</div><!---info--->

</div> <!---container--->

</body>

</html>

CSS

body {
background-image:url("images/carbg.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top center;


}

.container {
background-color:none;

width:950px;
margin-left:auto;
margin-right:auto;

}

.banner {
background-color:gray;

width:950px;

padding-top:5px;
padding-left:5px;
padding-right:5px;

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;

}

.contact {
text-align:right;

margin-top:-20px;

position:relative; /* needed for chrome*/
top:0px; /* needed for chrome*/
right:0px; /* needed for chrome*/
float:right;

font-family: Cooper Black, Arial Black, Sans-Serif;
font-size:20px;
}

.navcontainer {
margin-top:-20px;
margin-left:-20px;

}

.nav {
background-image:url("images/navimg.png");
background-repeat:repeat-x;
background-position:bottom;

height:30px;
width:950px;
padding-left:5px;
padding-right:5px;
}

ul {
list-style:none;
margin:20px;
padding:0;

}

li {
padding-top:2px;
float:left;
margin-left:20px;
margin-right:20px;

}

a {
color:white;
font-family: Cooper Black, Arial Black, Sans-Serif;
font-size:20px;

text-decoration:none;

}

a:link
{text-decoration:none}
a:visited
{text-decoration:none}
a:hover
{color:#ff0000}
a:active
{color:#a10000}
img
{border:none}

.info {
background-color:white;
width:950px;
height:500px;
margin-top:-21px;
padding:5px;

}

h1 {
text-align:center;
font-family: Cooper Black, Arial Black, Sans-Serif;

}

The problem is the div contact holding all the telephone number etc drops by 100px causing it to go over the nav var n into the info bit.
All the main info hasn't been added yet but you get the jist of it.

Excavator
12-26-2009, 08:35 PM
.contact is margined up, positioned and then floated. I think you're doing a little too much there.

No point in using a negative margin when you can just position it.
Float doesn't work with positioning and also only works when you have a width. The reason for that is you use float to put something beside something else so it needs a width to show how much room it's taking.

I'm not sure what you want it to end up looking like. If you .contact is supposed to sit on top of your #navcontainer, then top:-20px; might be what you want.

Throughout your entire code you make mistakes on your box model. See how the box model works here (http://www.w3.org/TR/CSS2/box.html). Those paddings count in the total width.

Have a look at this -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http: //www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title> Welcome to Jacks School of Motoring </title>
<style type="text/css">
body {
background: #fc6 url(images/carbg.jpg) no-repeat fixed center top; /*color for testing only*/
}
* {
margin: 0;
padding: 0;
border: 0;
}
.container {
width: 950px;
margin: 0 auto;
overflow: auto;
}
.banner {
background: #ccc;
width: 950px;
overflow: auto;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px; /*CSS3 struff is not going to work in many browsers*/
}
.contact {
width: 300px;
float: right;
text-align: right;
font-family: Cooper Black, Arial Black, Sans-Serif;
font-size: 20px;
}
ul.nav {
height: 30px;
width: 950px;
line-height: 30px;
list-style: none;
background: #0F0 url(images/navimg.png) repeat-x bottom;
}
li {
display: inline;
margin-left: 20px;
margin-right: 20px;
}
.info {
background: #fff;
width: 940px;
height: 500px;
padding: 5px;
}
a {
color: #fff;
text-decoration: none;
font: 20px "Cooper Black", "Arial Black", Sans-Serif;
}
a: link {text-decoration: none}
a: visited {text-decoration: none}
a: hover {color: #ff0000}
a: active {color: #a10000}
h1 {
text-align: center;
font: "Cooper Black", "Arial Black", Sans-Serif
}
</style>
</head>
<body>
<div class="container">
<div class="banner">
<div class="contact">
<p>
Phone - 00000 000000<br/>
Mobile - 07000 000000<br/>
Address 1, Address 2,<br/>
Postcode
</p>
</div> <!--contact-->
<a href="home.html"><img src="images/JacksLogo.png" width="400" height="200" alt="description of image goes here. I just guessed at image size."></a>
</div> <!--banner-->
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="prices.html">Prices</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="info">
<h1> Welcome to Jacks School of Motoring </h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div><!--info-->
</div> <!--container-->
</body>
</html>

Tyler138
12-26-2009, 10:41 PM
Thanks for the feed back, but it is still slightly messed up in chrome and firefox 3.0.16...

This is how is how i want it to look and how it looks in the newest firefox...

http://twitpic.com/vd5ct

but instead in the old firefox and chrome is looks like this...

http://twitpic.com/vd5h8


Also with the box model to fix it all i have to do is add
margin: 0 auto;
overflow: auto;
and the rest of the pixels from the padding equaling width of 960px in the container..?

Excavator
12-26-2009, 11:03 PM
Check that code again, I updated it right after I posted it but I think you grabbed it before I finished. The code that's there now should fix that.

To fix that header, I moved the floated .contact to go first - floats go first. If that looks weird to you, you could always float that logo image instead.

The box model fix is changing all the math so your width/margin/padding/border all figure in to the total width.

The *{margin:0;padding:0;} is the CSS reset. Read all about that here (http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/). I put that or a similar version of it on every site I write.

Excavator
12-26-2009, 11:09 PM
The box model fix is changing all the math so your width/margin/padding/border all figure in to the total width.

Sorry if that's confusing. For an example, if you have -
#id {
width: 900px;
margin: 20px auto;
padding: 5px;
border: 3px sold #f00;
}

The total width of #id would be 916px.
That would fit inside a 916px wide container.
You could put a 890px wide div inside #id, or two divs floated side by side if their combined width did not exceed 890px.

Tyler138
12-26-2009, 11:47 PM
Wow man, what can i say.

Thanks a lot, u have cleared up so much for me and it all made sense when i went through it.



Thanks a lot,

Defo be sticking around these forums

Tyler



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum