July 5, 200917 yr what is going on i've put padding:0; margin:0; border:0; over everything and still i'm getting gaps between all the images, am i having a complete brain freeze and overlooking someing completely rudimentary body coding </head> <body> <div class="wrapper"> <div class="content"> <a href="XXXX"><img class="food" src="images/food.gif" alt="food" title="food"></img></a> <img class="w1" src="images/line.gif" width="497" height="10" alt="W1" title="W1"></img> <img class="soho" src="images/soho1.gif" alt="soho" title="soho"></img> <img class="cafe" src="images/cafe2.gif" alt="cafe" title="cafe"></img> <img class="coffee" src="images/coffee3.gif" alt="coffee" title="coffee"></img> <img class="berwick" src="images/berwick4.gif" alt="berwick" title="berwick"></img> <img class="resturant" src="images/line.gif" width="344" height="10" alt="resturant soho" title="resturant soho"></img> <p class="london">XXXX<br/> London<br/> W1<br/><br/> </p> <div class="links"> <img class="hold" src="images/delete.gif" alt="delete" title="delete"></img> </div> </div> </div> CSS body {background-color: #8DCA81; font:1em verdana, arial, sans-serif; padding:0; margin:0; border:0;} div.wrapper {width:781px; margin-top:60px; margin-left: auto; margin-right: auto; } div.content { background-color: #fff; text-align:left; padding:0; margin:0; border:0;} .food {z-index: 5; border:0px; padding:0; position: relative;} .w1f {z-index: 4; border:0px; padding:0; position: relative;} .resturant {z-index: 4; border:0px; padding:0; position: relative;} .soho {z-index: 4; padding:10px; margin: 0; background-color: #FE0104; position: relative;} .cafe {z-index: 4; padding:0; margin: 0; position: relative;} .coffee {z-index: 4; padding:0; margin: 0; position: relative;} .berwick {z-index: 4; padding:0; margin: 0; position: relative;} .london {color:#EAFAE6; font-size:.76em; z-index: 6; position: relative;} .links {z-index: 4; padding:0; margin: 0; position: relative;}
July 5, 200917 yr Your image tags are wrong <img class="soho" src="images/soho1.gif" alt="soho" title="soho"></img> should be <img class="soho" src="images/soho1.gif" alt="soho" title="soho" />
July 5, 200917 yr Author thanks BlueDreamer, but i thought you could do it either way, it still validates any how i tried it unfortunately i'm still getting gaps on everything
July 5, 200917 yr Ok, try this 1. Set default image styles... img {display: block;} /* gets rid of bottom gap in Firefox and others */ a img {border: 0;} /* removes border on a linked image */ 2. Temporarily remove classes from the images to see what happens, the gaps should disappear though the images might not align 3. Add back one class and styling one image at a time and keep checking. If the gaps come back the CSS you just added will likely be the culprit.
July 5, 200917 yr Author ah {display: block;} got rid of the gaps what is display block, i've seen it in drop down menus before does using display block mean i cant use position relative unless i wrap everything in div tags thanks BlueDreamer
July 5, 200917 yr http://www.quirksmode.org/css/display.html unless it has a container with a width set then a block will not allow anything beside it. however, read the link for a better explanation. i could never be a teacher...
July 5, 200917 yr Author wow now i'm really out of my depth, whats a display declaration, the div the images are sitting in has a width i tried disconecting the css style sheet completely and the images still sit with a gap between them, i then wondered if they were picking up a stylesheet from the root folder, so i tried putting it on a different server, but i still cant get those gaps to go
July 6, 200917 yr just had a look and it seems to be working ok. one thing i would suggest reading up on is the distinction between ids and classes. you are repeating a lot of code and with a little bit of reading on the basics like that you'll find yourself doing a lot more with less code and less time. good luck with the rest of the site!
Create an account or sign in to comment