Different in 3 browsers.

[AndyJ87]

Hi all,

im having trouble with my first site for a friend.

in chrome everything is fine with what ive done so far, except at the very top of the page there is a small gap.

[img]http://i1004.photobucket.com/albums/af169/AndyBearVXD/why1.jpg[/img]

page wrap is relative, header and green button you can see are absolute.

now, i thought i would check my progress in firefox ( i wish i didnt )

[img]http://i1004.photobucket.com/albums/af169/AndyBearVXD/firefoxwhy.jpg[/img]

firefox has the header all the way over there and i cant figure out why… also the borders for the links on the right arent rounded :/

then, i checked in ie…

[img]http://i1004.photobucket.com/albums/af169/AndyBearVXD/ieeeeee.jpg[/img]

heres my CSS

Code:

*
*

body {background: #f90ed5;}

a {text-decoration: none; color: black; font: 20px Arial, serif; }
a:hover {color: #f90ed5; }

#Page-wrap {
width: 780px;
margin: 0 auto;
padding-top: 250px;
overflow: hidden;
position: relative;}

#logo {
margin: 0 auto;
position: absolute;
z-index: 1;
top: 0; }

#commbutton {
position: absolute;
top: 0;
right: 0;
z-index: 2;
margin: 0 50px 0 0; }

#main-content {
position: relative;
z-index: 100;
float: left;
background: white;
width: 490px;
padding: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; }

#sidebar {
font: 14px Arial, serif;
position: relative;
z-index: 100;
float: right;
width: 210;
padding: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; }

#main-nav {
list-style: none;}

#main-nav li {
font: 20px Arial;
color: black;
background: white;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-topright: 20px;
-moz-border-bottom-right-radius: 20px; }

#main-nav li a {
display: block;
padding: 3px 0;
margin: 5px 0 0 -60px;
text-indent: 60px;font: 20px Arial;
background: white;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-top-right-radius: 20px;
-moz-border-bottom-right-radius: 20px;}

#main-nav li.cur a {
color: white;
background: black;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-top-right-radius: 20px;
-moz-border-bottom-right-radius: 20px; }

#footer {
font: 10px Arial, serif;
margin: auto 0;
text-align: center;
background: white;
color: black;
-webkit-border–radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5x;
-moz-border-radius: 5px; }

this is how it should look ( this is in chrome )

[img]http://i1004.photobucket.com/albums/af169/AndyBearVXD/why2.jpg[/img]

[Johnny]

Can you post some mark up? I think you would be better off having the header graphic as a CSS backgroundimage rather than an image called in from your HTML. Also i would avoid the whole relative positioning thing for the button. Float it over there. ;)

[AndyJ87]

"Johnny" wrote:

Can you post some mark up? I think you would be better off having the header graphic as a CSS backgroundimage rather than an image called in from your HTML. Also i would avoid the whole relative positioning thing for the button. Float it over there. ;)

Code:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

• Home
• About Avon
• Being a rep
• Contact Me

© Ellie’s Avon

[Johnny]

"AndyJ87" wrote:

"Johnny" wrote:

Can you post some mark up? I think you would be better off having the header graphic as a CSS backgroundimage rather than an image called in from your HTML. Also i would avoid the whole relative positioning thing for the button. Float it over there. ;)

Code:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

• Home
• About Avon
• Being a rep
• Contact Me

© Ellie’s Avon

page-wrap = take out the image in your html and call it in with css. Make sure you have a width and height defined in here as well.

head-wrap – this is an empty div so could be the cause of your gap at the topof the page.

do you have a link to the site?

[AndyJ87]

ok, so i called the header up in css and thats in there fine both in chrome and ff.

i still have that gap though, despite getting rid of the empty div.

its still all over the place in ie though :/

site isnt live, im just in the building phase for a friend.

[Johnny]

Hi Andy.

When i get home from work i’ll see if i can knock something up for you. I think that your use of using relative positioning may have a lot to do with IE going crazy. Personally I would float the image rather than position it relative or absolute. Have you thought about having the logo and that green 25% graphic as part of the background image?

I’ll see what i can do later and post it up here.

[AndyJ87]

thanks for the help, im very new to html and css as you can probably guess

theres no reason why i couldnt.

just had it in my head that it gave the option to change that image if needed.

[TheDoc]

Hey Andy, the best/quickest way to get help is to post a live link to the problem page, otherwise it’s very difficult to diagnose.

[AndyJ87]

still struggling with these issues…

when opened in IE its all over the place, see above screenshot.

ive fixed the firefox version by taking out alot of the positioning tags and just floating it.

i still also have the issue where the top of the header has a small gap

[AndyJ87]

"TheDoc" wrote:

Hey Andy, the best/quickest way to get help is to post a live link to the problem page, otherwise it’s very difficult to diagnose.

http://andybear.hostzi.com/home.html

[AndyJ87]

"TT_Mark" wrote:

There is a margin on the body which is giving you the gap at the top (I think).

Set body{margin:0} and this should fix that problem

thanks alot Mark, this has really been bugging me !

any idea why its all screwed up in internet explorer ?

[Author]

Posts