Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

IE image border problem?

Started by iddqd, Jul 03 2006 11:02 PM

You cannot reply to this topic
Go to first unread post

6 replies to this topic

#1 iddqd

Young Padawan

Members
17 posts

Posted 03 July 2006 - 11:02 PM

Well I started to try and code my very first website using CSS only, just to be spiffy, but I ran into a few errors.

Here is the html code:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">
	<img src="images/wings_top.jpg" alt="Top header image - Top of wings and Seraphim Creative Sign" width="777" height="99" vspace="0"/>
	<img src="images/wings_middle.jpg" alt="Middle header image - Middle of wings and top of cross" width="777" height="98" vspace="0"/>
	<img src="images/wings_bottom.jpg" alt="Bottom header image - bottom of wings and cross, chains" width="777" height="86" vspace="0"/></div>
  
<div id="navigation">
	<img src="images/main_up.jpg" alt="Main page navigation link" id="main"/>
	<img src="images/about_up.jpg" alt="About page navigation link" name="about" id="about"/>
	<img src="images/portfolio_up.jpg" alt="Portfolio page navigation link" name="portfolio" width="131" height="42" id="portfolio"/>
	<img src="images/services_up.jpg" alt="Services page navigation link" name="services" width="131" height="42" id="services"/>
	<img src="images/contact_up.jpg" alt="Contact page navigation link" name="contact" width="131" height="42" id="contact"/>
</div>
  
<div>Content_Right</div>
  
<div>Content_Left</div>
  
<div>Footer</div>
  
</body>
</html>

Here is the CSS:

body {
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	background-color: #EFEFEF;
	margin-top: 0px;
}
div#header {
	width: 777px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
div#navigation {
	padding: 0px;
	width: 777px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
}
div#navigation img#main {
	margin-right: 19px;
	margin-left: 14px;
}
div#navigation img#about {
	margin-right: 18px;
}
div#navigation img#portfolio {
	margin-right: 19px;
}
div#navigation img#services {
	margin-right: 15px;
}
div#navigation img#contact {
	margin-right: 0px;
}

Here is the problem:
Posted Image

Maybe I screwed up (coding and design, don't mind the crappy piece of fireworks art

I wonder if IE has a problem with images in the same div, cause that's where the problem is.

Back to top

#2 NGPixel

Senior Programmer

P2L Staff
1,410 posts

Gender:Male
Location:Montreal, Canada
Interests:Web Design : Coding : Animation

Posted 03 July 2006 - 11:39 PM

you can either put 0px margins and padding to your images or simply put your images in different divs. That's a weird issue with IE... hope they get it fixed in IE7...

Back to top

#3 iddqd

Young Padawan

Members
17 posts

Posted 04 July 2006 - 08:50 AM

Omg...I tried everything with margins and padding except adding them to those images....

*hits self in forehead*

So this should work, right?

div#header img {
	margin: 0px;
	padding: 0px;
}

Thanks!

EDIT: That didn't work...hmmm, I wanted to see if there was anything else besides putting them in separate divs...I didnt want code bogged down by all those divs.

EDIT2: I tried changing the header id to a class and then putting all the images in a separate div, but the problem persists...

EDIT3: R....O...F...L....I changed the margins on the images from 0px to -1px and IE worked...YIPEE!!

EDIT4: In between the navigation div and the header div there is a 1px margin it looks like in IE now, but the spaces between the images are gone in the header div. So one problem down, one to go.

EDIT5: Getting tired of the edits? The -1px thing makes other browsers display wrong...using 0 border and 0 vspace for the header images I was able to eliminate the white space between the 2 divs, but the space between header images is still there.

Edited by iddqd, 04 July 2006 - 09:34 AM.

Back to top

#4 Jacorre

P2L Jedi

Members
824 posts

Gender:Male
Location:USA
Interests:Computers, Technology, Internet, Graphic/Web Design, Music, Soccer

Posted 04 July 2006 - 10:41 AM

I've noticed sometimes that if you make sure the html for the images are all on one line, as much as you can get it, that sometimes that helps with spacing issues.

Back to top

#5 iddqd

Young Padawan

Members
17 posts

Posted 04 July 2006 - 07:39 PM

I love you guys! I love this forum! I love life now! I still hate IE...

Thanks a bunch everyone who helped...and Jacorre for your winning answer. Everything is working, for now.

Thanks again!

Back to top

#6 iddqd

Young Padawan

Members
17 posts

Posted 04 July 2006 - 11:11 PM

Ok..since you guys are so awsome, I figured I'd ask another question.

Here is 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=iso-8859-1" />
<meta name="keywords" content="seraphim, creative, seraphim creative, creative, web design, graphic design, design, graphics, websites, website design" />
<meta name="description" content="Seraphim Creative is a unique web and graphic design business, specializing in visually stunning websites, graphics, or flash animations for your business." />
<title>--==[ Seraphim Creative ]==--</title>
<link href="css/global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><img src="images/wings_top.jpg" width="777" height="99" vspace="0" border="0"/><img src="images/wings_middle.jpg" width="777" height="98" vspace="0" border="0"/><img src="images/wings_bottom.jpg" width="777" height="86" vspace="0" border="0"/></div>
<div id="navigation"><a href="main.html"><img src="images/main_up.jpg" name="main" border="0" id="main"/></a><a href="about.html"><img src="images/about_up.jpg" name="about" border="0" id="about"/></a><a href="portfolio.html"><img src="images/portfolio_up.jpg" name="portfolio" width="131" height="42" border="0" id="portfolio"/></a><a href="services.html"><img src="images/services_up.jpg" name="services" width="131" height="42" border="0" id="services"/></a><a href="contact.html"><img src="images/contact_up.jpg" name="contact" width="131" height="42" border="0" id="contact"/></a></div>
<div id="container">
<div id="content_left">Rawr diggity </div>
<div id="content_right">Rawr Diggity </div>
<div id="footer">swdf</div>
</div>
</body>
</html>

Here is css:

body {
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	background-color: #EFEFEF;
	margin-top: 0px;
}

div#header {
	width: 777px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

div#navigation {
	width: 777px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

div#navigation img#main {
	margin-right: 23px;
	margin-left: 14px;
	padding: 0px;
}

div#navigation img#about {
	margin-right: 22px;
	padding: 0px;
}

div#navigation img#portfolio {
	margin-right: 23px;
	padding: 0px;
}

div#navigation img#services {
	margin-right: 19px;
	padding: 0px;
}

div#container {
	width: 777px;
	margin-top: 20px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}

h3 {
	font-size: 14px;
	color: #FFFFFF;
	background-color: #0099FF;
	font-style: normal;
	font-weight: normal;
	text-align: center;
	letter-spacing: 3px;
	font-variant: normal;
	border-top-width: 3px;
	border-bottom-width: 3px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #0099FF;
	border-bottom-color: #0099FF;
}

div#content_left {
	float: left;
	width: 333px;
	padding-right: 10px;
	text-align: left;
	padding-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
}

div#content_right {
	float: right;
	width: 424px;
	padding-left: 10px;
	text-align: left;
	padding-bottom: 10px;
}

div#footer {
	width: 777px;
	background-color: #0099FF;
	color: #FFFFFF;
	margin-right: auto;
	margin-left: auto;
}

For some reason, in firefox the background color of the footer div stretches to make the whole container div that blue color.