Forums

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.

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

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 )

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

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...

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

heres my CSS

*
*


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 )

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

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" said:
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. ;)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1? />
<title>Ellie's Avon site	</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"Estyle.css\" />

</head>
	<body>
		<div id=\"head-wrap\">


			
		</div>
		
		<div id=\"page-wrap\">
		
				<img src=\"images/header.png\" alt=\"Ellie's Avon\" id=\"logo\" />
				<img src=\"images/commissionbutton.png\" id=\"commbutton\" />

			<div id=\"main-content\">
			<p>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</p>
			<p>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</p>
		</div>
			<div id=\"sidebar\">
			<ul id=\"main-nav\">
			    <li class=\"cur\"><a href=\"\">Home</a></li>
				<li><a href=\"\">About Avon</a></li>
				<li><a href=\"#\">Being a rep</a></li>
				<li><a href=\"\">Contact Me</a></li>
			</ul>
			<br>
			</div>
	
	

		</div>
		<br>
				<div id=\"footer\">
				<p>&copy; Ellie's Avon</p>
				</div>
	</body>
</html>

Johnny

"AndyJ87" said:
[quote="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. ;)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1? />
<title>Ellie's Avon site	</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"Estyle.css\" />

</head>
	<body>
		<div id=\"head-wrap\">


			
		</div>
		
		<div id=\"page-wrap\">
		
				<img src=\"images/header.png\" alt=\"Ellie's Avon\" id=\"logo\" />
				<img src=\"images/commissionbutton.png\" id=\"commbutton\" />

			<div id=\"main-content\">
			<p>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</p>
			<p>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</p>
		</div>
			<div id=\"sidebar\">
			<ul id=\"main-nav\">
			    <li class=\"cur\"><a href=\"\">Home</a></li>
				<li><a href=\"\">About Avon</a></li>
				<li><a href=\"#\">Being a rep</a></li>
				<li><a href=\"\">Contact Me</a></li>
			</ul>
			<br>
			</div>
	
	

		</div>
		<br>
				<div id=\"footer\">
				<p>&copy; Ellie's Avon</p>
				</div>
	</body>
</html>

[/quote]

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" said:
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

TT_Mark

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

AndyJ87

"TT_Mark" said:
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 ?

treehouse : what would you like to learn today?

Forums

Different in 3 browsers.