Jump to content


IE Div Problem (Padding, Border? IDK lol, NEED HELP!)

Started by Spart, Jun 04 2007 09:11 PM

7 replies to this topic

#1 Spart

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 04 June 2007 - 09:11 PM

Hey everyone!

I'm here to see if you guys can help me with a problem I'm having.

I'm coding my header for my website design business and everything is going well. Until I checked in IE7... there's one stubborn div or padding or something that isn't moving where it should.

It works in FF2 and Opera, it's just IE7 that's messed up.

Let me show you:

IE7:

Posted Image


FF and Opera:

Posted Image


Here's my current code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>UNKNOWN Designs - Aurora, Canada</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">


#wrapper{
width: 764px;
margin-left: auto;
margin-right: auto;
}

#bottom{
width: 764px;
height: 97px;
padding: 0;
margin: 0;
}

#bottom-left{
background-image: url("images/left.gif");
width: 256px;
height: 73px;
}

#bottom-right{
background-image: url("images/right.gif");
width: 256px;
height: 73px;
}

#centerpiece{
padding: 0;
margin: 0;
}

#top{
height: 54px;
padding: 0;
margin: 0;
}

a:link{
color: #1346FF;
text-decoration: none;
}

a:visited{
color: #1346FF;
text-decoration: none;
}

a:hover{
color: #1D4EFE;
text-decoration: none;
}

</style>
</head>

<body background="images/bg.gif" style="text-align: center; margin-bottom: 0;">

<div id="wrapper">

	<div id="top">
	<img src="images/top.gif" alt="Top" border="0">
	
	</div>
	
	<div id="bottom" align="center">
	    <div id="bottom-left" align="left" style="float: left; width: 256px; height: 73px; text-align: left; padding: 0; vertical-align: top;">
	  
	  
	  		<div id="nav_left" align="center" style="text-align: center;">
	  		<img src="images/spacer.gif" width="6px;">
			<a href="#"><font face="Tahoma"><strong><font size="-1">HOME</font></strong></font></a><font size="-1">
			<img src="images/spacer.gif" width="6px;">
			<a href="#"><font face="Tahoma"><strong>ABOUT</strong></font></a>
			<img src="images/spacer.gif" width="6px;">
			<a href="#"><font face="Tahoma"><strong>TEAM</strong></font></a>
	    	</font>
			</div>
			
		</div>
	
		<div id="bottom-right" align="right" style="float: right; text-align: right; padding: 0; vertical-align: top;">
		
			<div id="nav_right" align="center" style="text-align: center;">
			<img src="images/spacer.gif" width="6px;">
			<font size="-1">
			<a href="#"><font face="Tahoma"><strong>PORTFOLIO</strong></font></a>
			<img src="images/spacer.gif" width="6px;">
			<a href="#"><font face="Tahoma"><strong>SERVICES</strong></font></a></font>
			<img src="images/spacer.gif" width="6px;">
			<a href="#"><font size="-1" face="Tahoma"><strong>GET A QUOTE</strong></font></a>
			<img src="images/spacer.gif" width="6px;">
			</div>
			
		</div>
		
		<div id="center_bottom" align="center" style="width: 252px; height: 97px; text-align: center; margin-left: 0; margin-right: 0; padding: 0;">
		<img src="images/center_bottom.gif" alt="Centerpiece_2" border="0">
		</div>
  </div>
	

	



</div>
</body>
</html>

#2 albinoAZN

    Albinos Are Extinct!!!

  • Members
  • PipPipPipPip
  • 1,139 posts
  • Gender:Male
  • Location:Mississippi, USA

Posted 05 June 2007 - 12:28 AM

I didn't really take a deep look into your code, but try adding this to the top of your CSS

*{padding:0;margin:0;}
That will set a universal padding and margin of 0.

I took just a quick peek at the code and I don't really like the way you did it, it's too complicated. When I wake up tomorrow after a good night's sleep, I'll show you an easier way.

#3 Spart

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 05 June 2007 - 11:28 AM

Thanks!

I'll try that code and if it doesn't work I'll post again :P

EDIT: I tried it and it didn't work, just moved everything up right to the top :/ lol

Edited by Spart, 05 June 2007 - 11:32 AM.

#4 albinoAZN

    Albinos Are Extinct!!!

  • Members
  • PipPipPipPip
  • 1,139 posts
  • Gender:Male
  • Location:Mississippi, USA

Posted 05 June 2007 - 03:41 PM

K, here's how I would go about making the type of banner you want.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>UNKNOWN Designs - Aurora, Canada</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{padding:0;margin:0;}
body{
text-align:center; /*aligns the template center for IE */}
#container{
width:800px; /*width of template*/
margin:0 auto 0 auto; /*centers the template in FF & others */
text-align:left; /*re-aligns all your content to the left of the container*/}
#header{
width:800px; /*change this to the width of your overall header*/
height:250px; /*also change this accordingly*/
background:url(images/header.jpg) no-repeat top; /*you'll save the entire header minus the text for the links as one image*/}
#left_links{
height:20px; /*change accordingly*/
width: 350px; /*the width of the left side of the banner, before the middle piece*/
float:left;}
#left_links a{
padding-right: 15px; /*adjust this to the space between your links*/
/*add your color and stuff here*/}
#right_links{
float:right;
height:20px; /*change accordingly*/
width: 350px; /*the width of the left side of the banner, before the middle piece*/}
#right_links a{
padding-left:15px; /*adjust this to the space between your links*/
/*add your color and stuff here*/}
</style>
</head>
<body>
<div id="container>
	<div id="header">
		<div id="left_links>
		<a href="#">links</a>
		</div>
		<div id="right_links">
		<a href="#">links</a>
		</div>
	</div>
</div>
</body>
</html>

that's rough and off the top of my head.

#5 Spart

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 05 June 2007 - 04:07 PM

Looks pretty good, but would it be easy to position the links?

EDIT: I tried it, but nothing show up but "links" twice. What's wrong?

http://www.trillianc...ud/3/header.php

Edited by Spart, 05 June 2007 - 04:20 PM.

#6 albinoAZN

    Albinos Are Extinct!!!

  • Members
  • PipPipPipPip
  • 1,139 posts
  • Gender:Male
  • Location:Mississippi, USA

Posted 05 June 2007 - 05:35 PM

The images don't show up because I put in generic image names. You need to go in and change the names of the images appropriately. also, I caught a mistake I made.

Add this code under the right links div.
<div style="clear:both">

#7 Spart

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 05 June 2007 - 07:32 PM

I had all the images renamed to the same names you had, and what does clear:both do? I've always wondered lol

#8 albinoAZN

    Albinos Are Extinct!!!

  • Members
  • PipPipPipPip
  • 1,139 posts
  • Gender:Male
  • Location:Mississippi, USA

Posted 06 June 2007 - 04:19 PM

when you put it under two divs that float left and right, it makes them align evenly, instead of one being staggered down.

anyway, the image doesn't work because you put quotes around the image path. Just take those quotes off.
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design