danny_h
Members
-
Joined
-
Last visited
-
its alright guys all sorted, only needed 2 short lines of CSS! cheers
-
I dont know if you have Firefox? seems to work perfectly on that and Safari, so thats what it should be looking like...
-
This is my css code with one of the position absolutes taken out. taking it out uncenters itand moves the div underneath down alot any more ideas on where im going wrong..? @charset "UTF-8"; /* CSS Document */ body { font-family:Arial, Helvetica, sans-serif; background-color:#ccc1af; display:block; } #page-wrap { width:960px; margin:0px auto; position:relative; position:absolute; left: 50%; margin-left: -480px;/* half of the width */ top: 0px; } #header { background: url(../../image/header.jpg); /*position:absolute;*/ top: 0px; width: 960px; height: 418px; left: 481px;/*some magic to align the element in the center;*/ width: 960px; margin-left: -480px;/* half of the width */ padding:0; border: 0px; } #upperbody { background: url(../../image/upperbody.jpg); background-repeat:no-repeat; position:relative; position:absolute; width: 940px; height: 632px; left: 50%; margin-left: -480px;/* half of the width */ margin-top:418px; padding-left: 20px; } #upperbody ul { list-style:none; } #upperbody ul li { float: left; padding: 0px; margin: 0 40px 30px 0; /*-moz-border-radius: 10px; -webkit-border-radius: 10px;*/ border: 5px solid white; display:block; } #footer { background: url(../../image/footer.jpg); position:absolute; position:relative; width: 960px; height: 741px; left: 50%; margin-left: -480px;/* half of the width */ margin-top:1155px; padding-left: 20px; padding-top: 0px; clear:both; } #footer ul { list-style:none; font-family: Arial, Helvetica, sans-serif; } #footer ul li { float: left; padding: 0px; margin: 0 40px 30px 0; /*-moz-border-radius: 10px; -webkit-border-radius: 10px;*/ border: 5px solid white; display:block; } #footercontent { position:absolute; width: 365px; height: 190px; margin-left: 113px;/* half of the width */ margin-top:610px; padding-top: 0px; left: -7px; top: -58px; } #footercontact { position:absolute; width: 197px; height: 137px; margin-left: 500px;/* half of the width */ margin-top:610px; padding-top: 0px; left: 27px; top: -47px; } .footertext { font-family:Tahoma, Geneva, sans-serif; font-size:11px; color:#666; } .footerheader { font-family:Verdana, Geneva, sans-serif; font-size:22px; color:#333; } .footersubhead { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#333; } .copyright { font-family:"MS Serif", "New York", serif; font-size:11px; color:#999; font-style: italic; } a:link { text-decoration: none; color:#666; } a:visited { text-decoration: none; color: #666; } a:hover { text-decoration: none; color:#966; } a:active { text-decoration: none; } .clear:after { content: ""; display:block; visibilty: hidden; clear:both; } .clear {zoom: 1;} li:hover { border: 3px solid blue; } img {display: block; border: 0;} a img { border: 0px; } .lightbox { }
-
Ahh i do indeed, but had to use positioning to get it to work in firefox, will see what happens, but it might not be pretty
-
Having rather large problems with my portfolio website, working perfectly on firefox, but messes up completely with Internet Explorer! As im on a Mac its pretty hard to keep checkin internet explorer to see how its coping. Would someone be able to take a look in IE and possibly figure out the problems its having? www.defunktcreative.co.uk Thank you
-
Yay!!! it works!! cheers im assuming its because of the display:block; part, why exactly does this fix it if you dont mind me asking?
-
It doesnt appear to have solved the problem just added that at the bottom of my CSS code but stil have those annoying gaps!
-
Im a fairly beginner html and css coder and currently designing my portfolio site in dreamweaver and whenever previewing in Firefox, these gaps show up between my images and their borders. Can someone please help me figure out why this is happening?? the gaps are also visible in dreamweaver before previewing. Below is a screenshot and my code. HTML <!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=UTF-8" /> <title>Defunk Creative >> It's just design</title> <link href="inc/css/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="page-wrap"> <div id="header"></div> <div id="upperbody"> <ul> <li><a href="image/creativedesign.jpg"><img src="image/small/creativedesignsmall.jpg" alt="Cambridge School of Art" /></a></li> <li><a href="image/gecko.jpg"><img src="image/small/geckosmall.jpg" width="400" height="200" alt="Cambridge School of Art" /></a></li> <li><a href="image/howtoescape.jpg"><img src="image/small/howtosmall.jpg" width="400" height="200" alt="Cambridge School of Art" /></a></li> <li><a href="image/niftee.jpg"><img src="image/small/nifteesmall.jpg" width="400" height="200" alt="Cambridge School of Art" /></a></li> <li><a href="image/thisisgraphic.jpg"><img src="image/small/thisissmall.jpg" width="400" height="200" alt="Cambridge School of Art" /></a></li> <li><a href="image/net.jpg"><img src="image/small/netsmall.jpg" width="400" height="200" alt="Cambridge School of Art" /></a></li> <li><a href="image/loving.jpg"><img src="image/small/lovingsmall.jpg" width="400" height="200" alt="Cambridge School of Art" /></a></li> <li><a href="image/de.jpg"><img src="image/small/desmall.jpg" width="400" height="200" alt="Cambridge School of Art" /></a></li> </ul> </div> </div> </body> </html> CSS @charset "UTF-8"; /* CSS Document */ body { font-family:Arial, Helvetica, sans-serif; background:#ccc1af; } #page-wrap { width:960px; margin:0px auto; position:relative; position:absolute; left: 50%; margin-left: -480px;/* half of the width */ top: 0px; } #header { background: url(../../image/header.jpg); position:absolute; top: 0px; width: 960px; height: 418px; left: 50%;/*some magic to align the element in the center;*/ width: 960px; margin-left: -480px;/* half of the width */ padding:0; border: 0px; } #upperbody { background: url(../../image/upperbody.jpg); position:relative; position:absolute; width: 960px; height: 632px; left: 50%; margin-left: -480px;/* half of the width */ margin-top:418px; } #upperbody ul { list-style:none; } #upperbody ul li { float: left; padding: 0px; margin: 0 23px 23px 0; /*-moz-border-radius: 10px; -webkit-border-radius: 10px;*/ border: 3px solid white; display:block; } img { border: 0px; } img:hover { border:0px; }