slight gap in IE and bigger one in FF

**wood1e** · Sep 22, 2007 03:51

Hi, I have been working on a web page, and everything was wonderful until I thought I found a better way then I got tired I now have a small gap in bottom left hand side, in IE and in FF the gap is there, plus a gap between the end of the bottom graphi and the start of the drop shadow graphic...any help would be greatly appreciated.

view page

**lkagan** · Sep 22, 2007 07:42

I'm not really sure what you're talking about. The page renders very differently in FF 2 and IE 7. All I can offer is that when you start talking about slight gaps, it sounds like a margin issue. You may want to explicitly set the margin via css to make up for the difference in default margin between browsers.

**Centauri** · Sep 22, 2007 09:15

The biggest problem here is you are trying to align unrelated objects, possibly still thinking in table-layout terms. With a site like this, an overall fixed-width and centred wrapper div around everything will constrain contents and make things much easier to align. The left shadow can then be applied as a background to the wrapper so it extends all the way with no breaks in continuity - the top part can be hidden with a background colour on the #header div.

While I am at it, I will address a few other issues on the way down. There are a number of unnecessary divs here - if there is only one thing inside a div, it is a good bet that the div is not required and the styling can be directly applied to the contained element. Any graphical text should be marked up as actual text, and the text can be replaced by the image in the css - this includes the company logo, menu links etc. As such, the logo can be simple a <h1> header, the menu <ul> can be styled without a containing div, the banner can contain text describing the purpose of the banner with the image as a background, and the title bar can be a <h2> heading indicting the title of the page. The various content text boxes are probably better defined as classes to allow more than one use, and the content images can be styled directly without a containing div.

Try this version of the html :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<meta name="Keywords" content="">
<meta name="Description" content="">

<style type="text/css">
<!--
	@import url("layout4.css");
-->
</style>
</head>
<body id="pghome">

<div id="wrapper">
  <div id="header">
    <h1>Company Name</h1>
  	<ul id="menu">
  	  <li class="menu_home"><a href="index.html">Home</a></li>
  	  <li class="menu_about"><a href="about.html">About</a></li>
  	  <li class="menu_products"><a href="product.html">Products</a></li>
  	  <li class="menu_devices"><a href="devices.html">Devices</a></li>
  	  <li class="menu_contact"><a href="contact.html">Contact</a></li>
  	</ul>
  </div>
  <div class="banner">Banner description here</div>
  <h2>HOME</h2>
  <div id="content">
    <div class="box2">
      <p>Etiam dolore nemo consequat. Aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.</p>
      <p>Veritatis et quasi architecto beatae vitae dicta sunt, lorem ipsum dolor sit etiam dolore nemo consequat.</p>
      <p> Aspernatur aut odit aut fugit, sed quia consequuntur magni dolores</p>
  	</div>
   	<img src="images/main_images.jpg" alt="" width="295" height="203" class="box3" title="image description">
  </div>
  <div id="footer">
    <a href="index.html">HOME</a> | 
	<a href="about.html">ABOUT</a> | 
	<a href="product.html">PRODUCTS</a> | 
	<a href="devices.html">DEVICES</a> | 
	<a href="contact.html">CONTACT</a> 
  </div>
  <div id="bottom"></div>
</div>
</body>
</html>

The css follows next post (in case it exceeds post limit)

**Centauri** · Sep 22, 2007 09:36

The css I used is :

Code:

/** BASIC */
* {
   padding: 0;
   margin: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
}
#wrapper {
	width: 758px;
	margin: 0 auto;
	background-image: url(images/light_menu_16.gif);
	background-repeat: repeat-y;
	background-position: right top;
}

/** HEADER */

#header {
	height: 62px;
	padding-top: 20px;
	background-color: #FFFFFF;
}
h1 {
	width: 247px;
	height: 62px;
	float: left;
	background-image: url(images/logo1.jpg);
	font-size: 1px;
	color: #FFFFFF;
}

/** MENU */

#menu {
	float: right;
	height: 26px;
	margin-top: 36px;
}
#menu li {
	list-style: none;
	float: left;
}
#menu a{
	display: block;
	height: 26px;
	width: 96px;
	font-size: 1px;
	background-repeat:no-repeat;
	color: #C4C3C3;
	text-decoration: none;
}
#menu .menu_home a{
	width: 94px;
	background-image: url(images/light_menu1_05.gif);
	color: #FFFFFF;
}
#menu .menu_home a:hover {
	background-image:url(images/light_menu_05.gif);
}
#menu .menu_about a{
	background-image: url(images/light_menu1_06.gif);
}
#menu .menu_about a:hover {
	background-image:url(images/light_menu_06.gif);
}
#menu .menu_products a {
	background-image: url(images/light_menu1_07.gif);
}
#menu .menu_products a:hover {
	background-image:url(images/light_menu_07.gif);
}
#menu .menu_devices a {
	background-image:url(images/light_menu1_08.gif);
}
#menu .menu_devices a:hover {
	background-image:url(images/light_menu_08.gif);
}
#menu .menu_contact a {
	width: 107px;
	background-image: url(images/light_menu1_09.gif);
}
#menu .menu_contact a:hover {
	background-image:url(images/light_menu_09.gif);
}
#pghome .menu_home a {
	background-image:url(images/light_menu_05.gif);
	cursor: default;
}

/** MAIN PIC */

#pghome .banner {
	height: 170px;
	margin-right: 14px;
	background-image: url(images/testing_10.jpg);
	font-size: 1px;
	text-indent: -1000px;
}
h2 {
	height: 20px;
	background-image:url(images/light_menu_12.gif);
	font-size: 13px;
	color: #FFFFFF;
	padding-left: 7px;
	line-height: 20px;
	margin-right: 14px;
}

/** CONTENT */

#content {
	border-left: 1px solid #a1a1a5;
	line-height: 20px;
	font-size:13px;
	font-weight: 400;
	margin-right: 14px;
	overflow: hidden;
}
* html #content {
	height: 1%;
}
.box1 {
	float: left;
	width: 170px;
	height: 348px;
	margin: 0 0 6px 0;
}
.box2 {
	float: left;
	width: 320px;
	margin: 0px 0px 20px 18px;
	height: 240px;
	padding: 20px;
}
.box3 {
	float: right;
	margin: 55px 20px 0px 0px;
}

/** FOOTER */

#footer {
	height: 41px;
	background-image:url(images/bottom.jpg);
	margin-right: 14px;
	padding-top: 75px;
	font-size: 10px;
	text-align: center;
	clear: both;
}
#footer a {
	text-decoration:none;
	color: #000000;
}
#footer a:hover {
	color: #FFFFFF;
}
#bottom {
	background-image: url(images/light_menu_27.gif);
	height: 16px;
	font-size: 1px;
}

Everything that goes full width inside the wrapper is not given a width at all, and all but the header gets a 14px right margin to clear the shadow. The <h1> heading gets the logo as a background, and the text is hidden by making it small and the same colour as the background - other members here have other methods of text replacement they like to use, but this is one way.

The background graphics I applied to the <a> elements rather than the <li>s, as IE6 doesn't recognise hover on anything other than links. I set the common menu tab styling (block display, height background repeat, text style (colour hidden again) in one css rule, and the different item classes get only what is not common (the graphic and any width variation). I also set an id on the body, and this combined with the menu item class, can set the hover background style and non-pointer curser for the current page.

I also combined the body id with the banner class so you can set a different banner image for each page if you like. Note that a side shadow is not required on this graphic.

The overflow:hidden on the content div ensures the div visually encloses the floated contents and displays the left border - as IE6 doesn't understand that, it gets a * html hack to invoke HasLayout. I removed the height from #content to allow the contents to set the height.

The footer is all-in-one with the bottom graphic as its background, and the clear:both ensures it positions below the content. The #bottom div with the bottom shadow background sits below this, and doesn't get the right margin so that the graphic covers the side shadow.

See if this works better for you.

User Tag List

Thread: slight gap in IE and bigger one in FF

Thread Tools

Display

slight gap in IE and bigger one in FF

Bookmarks

Bookmarks

Posting Permissions