First of all, I'm new here. Hello everyone. I'm Dan.

Secondly, I've got this CSS Border issue that is bugging the hell out of me.

I've been unable to find the solution to this problem, and I've scoured the web for weeks looking for the answer.

diazgraphics.com is my site. The images on my site have a white border added to them with CSS. The borders look fine in Firefox, but when I view it in IE6 there's an extra space at the bottom between the image and its border. Everyone I've shown my site has viewed it in IE6 and never noticed it until I pointed it out, but that's not good enough. I need there to be no space there.

 

How can I eliminate the unwanted bottom space between the image and its CSS border?

Have you tried doing a CSS reset on margins and padding? This is always the first element in my stylesheets:

 

* {
 margin: 0;
 padding: 0;
}

Not entirely sure why it does that. IE is funny about whitespace sometimes. what happens if you put the </div> on the same line as where it starts?

 

The easiest work around would be to apply the border to the IMG element instead if the #thumbnail rule as you got now.

 

 

On a sidenote: You should never have the same ID defined in one document. the ID is tehre to identify specific elements. For your purpose you should use the CLASS attribute instead.

 

Also, it doesn't look like you need to wrap your images in DIVs. Instead you can just apply the CSS rules to applied to #thumbnail to the A elements.

 

Your have used an IMG element as background for your site, which is also unnecessary, it's better to define it in CSS using the background-image property. Saves markup, and makes more semantic sense. (For instance, have a look how your site looks without any CSS styling, and you'll see that huge background image of yours appearing before the content.)

Not entirely sure why it does that. IE is funny about whitespace sometimes. what happens if you put the </div> on the same line as where it starts?

 

Oh my goodness! That was the cause all along!

 

The easiest work around would be to apply the border to the IMG element instead if the #thumbnail rule as you got now.

On a sidenote: You should never have the same ID defined in one document. the ID is tehre to identify specific elements. For your purpose you should use the CLASS attribute instead.

 

That's a piece of web etiquette I had not learned yet. Thank you.

 

Also, it doesn't look like you need to wrap your images in DIVs. Instead you can just apply the CSS rules to applied to #thumbnail to the A elements.

 

I chose that because not all of my A elements are images. But I think I may be misunderstanding your advice.

 

Your have used an IMG element as background for your site, which is also unnecessary, it's better to define it in CSS using the background-image property. Saves markup, and makes more semantic sense. (For instance, have a look how your site looks without any CSS styling, and you'll see that huge background image of yours appearing before the content.)

 

That background image also employs an image map. When I learned image maps I only learned to form them in the page itself. If I move it to the style sheet, can it still maintain the image map?

Yea, you’ve got the same problem in IE7 too.

As Brandon suggested, you need to remove any padding that may be present in the #thumbnail divs.

Those images are being used within a hyperlink and will have borders already.

Try changing your img css from {border-style: none;} to {border: none;}

 

I personally would like to see this page centred in the browser window.

good luck

Wow. Posted too late!

Looks like you took Brandon’s advice and copied his code to the top of your style sheet.

Well done.

Wow. Posted too late!

Looks like you took Brandon’s advice and copied his code to the top of your style sheet.

Well done.

you're right I did. It didn't fix the border issue. It was Thomas' suggestion that fixed it, but I decided to leave the code in there.

I chose that because not all of my A elements are images. But I think I may be misunderstanding your advice.

What you can do is <a href="..." class="thumbnail"><img src="..." alt="..." /></a>

Then your CSS rules for .thumbnail will be applied to the A elements which act as thumbnail wrappers and leave the rest unaffected.

 

That background image also employs an image map. When I learned image maps I only learned to form them in the page itself. If I move it to the style sheet, can it still maintain the image map?

Ah, I see. No, CSS can not define image maps.

However, you could take the title text you've turned into a link, and save it to a separate image. Just the white text with transparent background. Then you can use your large image as a background image and insert the smaller image into a h1 element positioned where you want it.

...not sure if that was a good explaination...

...not sure if that was a good explaination...

A fine explanation. Thank you. I'm gonna start doing that from now on.

Just some advice id center the whole site if i were you

 

container {
width:80%;
margin:20px auto 20px auto;
}

 

Thats how I center all my websites.

 

Thats just my opinion though

Just some advice id center the whole site if i were you

 

container {
width:80%;
margin:20px auto 20px auto;
}

 

Thats how I center all my websites.

 

Thats just my opinion though

i might take that advice and center it. I do not, however, understand container. It's not covered well in the book that I'm using. What does it do and how will it effect my site?

i might take that advice and center it. I do not, however, understand container. It's not covered well in the book that I'm using. What does it do and how will it effect my site?

Container is just an Div id, so I put the html code Im working on

<body>
<div id="container"> !!!!!! Beginning Of The Container Div !!!!!!!

<div id="header">
 <ul>
<li><a href="">Home </a>|</li>
<li><a href="pictures.html"> Pictures </a>| </li>
<li><a href="news.html">News </a>| </li>
<li><a href="">Contact</a></li>
</ul>
<p>Who Dey</p>
</div>

<div id="inner">
<div id="leftbox"> 
<h2>Navigation</h2> 
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Services</li>
</ul>

<p> </p>
<hr />
<p>Image Of The Week</p>
<p><img src="images/imgofweek.jpg" width="157" height="160" /></p>
<p> </p>
</div>

<div id="rightbox"> 
<h2>Who Dey... </h2>

<p class="style2"> Hello and Welcome To the premire site for Bengals fans. We have all the news and everything that any bengals fan would need. There will be all the news regarding the bengals and all scores and stats. If you have any questions about anything email me at Jake@Boyleswebdesign.com </p> 
<h5 id="sig">~Jake Boyles/Web Designer </h5>
<p> </p>
<p> </p>
</div>

<div class="style1" id="footer">© 2007 Jake Boyles / Boyles Web Design / <a href="http://www.boyleswebdesign.com" target="_blank">www.boyleswebdesign.com </a></div>
</div>
</div> This is the end of the "Container" Div

</body>

</html>

 

If you see the container div, and give it an Id of "container" it just contains the whole website, so what you need to do is put a div right after the beginning of the body tag, then close it right before the end of the </body> tag. Then use the css i already told you and that centers all the content of your site.

sorry this is hard to explain, if theres anyone else that can explain this better, please explain it.

everything makes sense except for why your container is 80% with 20px margins.

everything makes sense except for why your container is 80% with 20px margins.

 

Well With The margins on auto that only makes it a certain space away from the edge but with 80% it gives it more room. Just try it on your site and see if it works.