Jump to content

CSS layout

Ida

By Ida
in CSS

 Share

Recommended Posts

Ida Newbie

Ida

Posted
Posted (edited)

I'm new at CSS layout and need some help. The problem that i have is that there is a gap between the top box and the boxes underneath. Doesn't look very nice. I've tried all kinds of things but nothing works.It works fine in FireFox and Opera but not in IEYou can see how it looks here: http://www.visioni2i.se/kf_css/This is the Html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link href="css/body.css" rel="stylesheet" type="text/css"><link href="css/layout.css" rel="stylesheet" type="text/css"></head><body><div id="container">  	<div id="bgTopShadow"></div>    <div id="bgLeftShadow"></div>  <div id="bgStartLeft"><div id="introtext">     <div id="logoStart"><img src="images/logo_start.gif" alt="Kristallforum Logotyp" width="236" height="62" /></div>     <p class="vittext"> <br>       Vi hälsar er välkomna till våra butiker. Härkan ni i lugn och ro välja ut er   favoritmodell ur vårt stora sortiment av egentillverkade kristallkronor av hög   kvalitet. Vi har även större kronor som passar i hem med högre tak höjd,   restauranger, hotell, teatrar m.m.<br /><br />       <span class="vittext">      <a href="om_kristallforum.html" class="vittext"><strong>Välkommen in >> </strong></a></span></p>  	<div id="erbjudandeStart"><img src="images/erbjudande.gif" alt="erbjudande" width="118" height="116" /></div></div>  </div>        <div id="bgStartRight"></div>  <div id="bgRightShadow"></div>    	<div id="bgBottomShadow"></div></div>          </body></html>

This is the CSS code:

#container {	width: 750px;	MARGIN-LEFT: auto;  	MARGIN-RIGHT: auto;	margin-top: 20px;	}		#bgTopShadow {	float:left;	width: 750px;	height: 7px;	background:url(top_shadow.gif) no-repeat;	}	#bgLeftShadow {	float:left;	width: 7px;	height: 424px;	background:url(left_shadow.gif) repeat-y;	}	#bgStartLeft {	float:left;	width: 430px;	height: 424px;	background:url(bg_start.gif) repeat-x;	padding:0px;	}#bgStartRight { 	float:left;	width: 306px;	height: 424px;	background:url(krona_start.jpg) no-repeat;	}#bgRightShadow {	float: left;	width: 7px;	height: 424px;	background: url(right_shadow.gif) repeat-y;		}	#bgBottomShadow {	float: left;	width: 750px;	height: 7px;	background:url(bottom_shadow.gif) no-repeat; 	}	#introtext {	width: 350px;	position:relative;	top: 40px;	padding: 0;	margin: 0 auto;		}	#logoStart {	margin: 0 auto;	width: 236px;	}	#erbjudandeStart {	float: right;	}

Can anyone please help me?

Edited by Jonas
Link to comment
Share on other sites
Jack McKalling Dedicated Member

Jack McKalling

Posted
Posted

I've had sort like this issue too, but I used a table instead of divs.Off the record, personally, I found tables rather more arranged than divs :)Here with me, it was the fact that the row inwhich it occurred haddent had a height defined, or the pixture in it was bigger than the height.Maybe this helps you? I am not able to make sense of this stylesheet, as I work different :)

Link to comment
Share on other sites
Ida Newbie

Ida

Posted
  • Author
Posted

I have made sure that the hight on the box and the image is correct so that should not be the problem. However i just saw that when i pass the mouse over the box (I'm using Dreamweaver) there's some kind of infobox that says: height: 7px (16px). What could these parenthesis mean? I can't find 16 px anywhere in the code. It's really odd.

Link to comment
Share on other sites
Ida Newbie

Ida

Posted
  • Author
Posted

I fixed it! :)I put

background-position: bottom left

on the div and it pushed the image down. I don't know what would have happened if i had another box on top of that though. But i'm happy for now.Thanks for your help. It made me try other ways :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...