Need some xhtml-css help

anable

I was hoping for a bit of help on a web design project of mine. I'm just now transitioning from the old school table layout thought process to this fancy new div css thing. In any case, here's what I have right now:



Two questions:
1. How can I get rid of that space between my rounded box gif and the actual content? I've tried removing padding and margin from all of the divs. I've tried editing the picture itself to make sure there's no extra spacing. I've even removed the left, right, breadcrumb, and content divs. It looks the same in both Firefox and IE6. What am I missing?
2. Is there an easy way for me to apply the drop shadow effect that I have on my header (which is a single image) to my body? The body size is going to change with content so I'm not sure how to handle that.

Thanks!

LoneIgadzra

I too have had spacing problems in the past like that, with tables that I couldn't get to have no spacing in or between cells no matter what, or img tags that would always appear a little ways apart. But without looking at your code, I can't tell you if you've made any obvious mistakes.

As for your shadow, you can make a div with a background that tiles horizontally or vertically, I think like so:

background: url(repeatingimage) repeat-x;

(or "repeat-y" as needed)

Of course you may need to re-divide the page layout and make new border graphics, but that's how you can do it. Since you can't make another div automatically extend to the length of your content div without some serious finagling, you need to make a vertically-tiling image (typically a 1px high gif) with the shadow on the side the background for the actual content div (use padding as necessary to make the text appear in the right place). Then stick another div on the foot of the page with the bottom shadow and corner.

MagicToaster

anable wrote: »

1. How can I get rid of that space between my rounded box gif and the actual content?

Can we see the code you used to build this specific part?

anable

Here is my index div code:

<div id="header">
    <img src="images/banner.gif" />
  <!-- end #header --></div>
  <div id="adHori">
  	<img src="images/ad_hori.gif" />
    <!-- end #adHori --></div>
  <div id="contentTop">
  	<img name="bodytop" src="images/body-top.gif" />
    <!-- end #contentTop --></div>
  <div id="avatar">
    <img src="images/avatar-vert.gif" />
  <!-- end #avatar --></div>
  <div id="adVert">
    <img src="images/ad_vert.gif" />
  <!-- end #adVert --></div>
  <div id="breadcrumb">
    <a href="#">games</a> / <a href="#">classic</a> / <a href="#">chess</a>
    <!-- end #breadcrumb --></div>
  <div id="mainContent">
    <h1> Main Content </h1>
  <!-- end #mainContent--></div>

And here is the CSS code:

.thrColFixHdr #contentTop {
	background: #006BB3;
	padding: 0;
	margin: 0;
}

.thrColFixHdr #avatar {
	float: left;
	width: 125px;
	background: #FFFFFF;
	padding: 5px;
}
.thrColFixHdr #adVert {
	float: right;
	width: 160px;
	background: #FFFFFF; 
	padding: 5px;
}

. thrColFixHdr #breadcrumb {
	text-align: left;
	padding: 0;
}

.thrColFixHdr #mainContent { 
	margin: 0 200px;
	padding: 0 10px;
}

Also, I don't know if this makes any difference, but I'm using Dreamweaver CS3 and this is based off of their Three Column Fixed template.

Jasconius

That's textbook 3 pixel jog.

In the div that is containing that top curved image, put the opening and closing div tag on the same line as the image.

Specifically

<div id="contentTop"><img name="bodytop" src="images/body-top.gif" /><!-- end #contentTop --></div>

anable

Hmm. That half way fixed it. It works in IE6 now, but Firefox still shows that gap. Is this "3 pixel jog" thing supposed to be isolated to IE6? If not, it's slightly depressing that xhtml has whitespace issues.

Edit: OK, I did a Google search on the 3 pixel jog thing and if I set the div height in absolute pixels, it works in both Firefox and IE6.

Thank you!

Double edit: With absolute height, it fixes the problem in Firefox, but for IE6, you still need to have the div tags on one line. Poop. At least it's fixed now.

Lewisham

anable wrote: »

Hmm. That half way fixed it. It works in IE6 now, but Firefox still shows that gap. Is this "3 pixel jog" thing supposed to be isolated to IE6? If not, it's slightly depressing that xhtml has whitespace issues.

XHTML most absolutely does not have whitespace issues. Whitespace between XML tags has absolutely no meaning.

I've never seen the "3 pixel jog" before, but then again, I usually accept IE 6 is completely fucked when it comes to CSS rendering, so just write it off.

Try removing the margins and padding from the img tag. Firefox might implicitly render them, I can't remember.

EDIT: BTW, for something like this, I think it is better form to use CSS to include that image as a background to the content div. It's style sugar that you can going to put everywhere. It has no meaning to the actual content or structure.

Jasconius

It's not supposed to mean anything, but IE6 is not xhtml compliant.

Unfortunately, it still accounts for over half of browsers accessing the internet, so yeah.