weird div problem

smeggle

Been implementing a new design over at my blog system. For some reason the background image srced via (url) in the css is not displaying.

I've used tables for now to implement the border around the center content though will be upgrading those to divs when I get everything working (And when I get time :rolleyes: ).

For some reason the background image srced via (url) in the css is not displaying. This should be controlled via the main-content div nested in the border tables.

i.e.

<div id="main-content">

The css for this bit is this

#main-content {
  background: #ffffff url("../imgs/index.gif") repeat;
  width: auto;
  height: auto;
  float: center;
  padding: 5px 5px 5px 5px;
}

Not sure if the float:center; is actually needed as it centers wether that is on or off .. gonna try a direct link to the image as that may be the problem but I've had this before and that didn't fix it and I'm unsure what I did last time. (Think it was swithing image formats till one worked ?).

Once I get that done I can sort the content display boxs out, which I'm thinging of putting a complimentory background color in and keeping the dashed outline but with corner imgs also dashed but maybe solid? (Sorry thinking out loud ).

I've also just noticed the side borders aren't stretching down the sides.. hmm maybe I have the content div in the wrong place? Theres also a line appearing below the top border/corners in firefox but not I.E. - got to look at that as well.

Would also appreciate comments on the new design - I'm thinking it's way cleaner than that previous green monster that I had in place and it now matches the forum.

Anyway, appreciate any ideas as to whats causing it?


edit: content div has to be in the right place - just tried moving them but that totally borks every thing




(nb: The images aren't mine but I've been playing with this idea for awhile since I installed the forums last year. Obviously full kodus go to the original creator and I'll be getting in touch with them for permission and will link to there stuff in appreceation of there further use).

smeggle

Updated:

Managed to fix the background by moving the main-content to a td and removing the main-content div, (will have to fix that now ). Offline every thing is working fine (apart from mozilla showing a slight line between the top corners/border).

Online, everything is working except the side borders are not strectching down as they should. Main content is in the right place, between the left and right border.

smeggle

Suppose it would help if I gave the LINK

Serbian

Hey smeggle,

smeggle wrote:

Not sure if the float:center; is actually needed as it centers wether that is on or off

center isn't actually a valid attribute for float, it only takes left, right, inherit and none.

There are a few other quirks with the layout, most of them you have noted already above. Another couple of things I have noticed:

• There's a lot of redundant white-space to the right on every browser I tested it in
• The font-size is much bigger in IE 5.5 and IE 5.01. This is due to the fact that you have used a table . Just add: table { font-size: 1em; } to the stylesheet to fix it.
• The right-hand column drops below the left and middle columns in 800x600 (on FireFox anyway).

If you could fix the white-space to the right and the gap at the top of the content div then it would be easier to get an idea of what you are aiming for.

smeggle

Fixed it! Well a friend gave me the fix. I'm having to use ../../ for the sides to obtain the css value yet the top and bottom only need ../ which is weird...

I've noticed the problem with 800x600 - it's doing that in i.e. as well, so a lot of work to do still.

Ok to give you an idea of what I'm upto;

As you can see I've installed a white space centered in the browser. Thats sitiing on a blue jeans background with the header/footer outside of the center piece. So next I'm going to get the three columns to center in that area - that should even out the white area your seeing on the right.
I'll probably change these to percentage widths when I get it all back into divs as this generally cures the resolution problem from what I've found. Not allways though..

So next bit is to get those content boxs tidied up and displaying evenly.

Thanks for the i.e. 5.01/5.5 tip - should be ok to put that in the custom i.e. css would you say? The columns width and some other stuff are controlled via here so I assume I can over ride that in there?

Thanks again

Serbian

The gap at the top of the main content is being broken by the images text-align. Add this to the stylesheet and it will fix it:

img {
   vertical-align: text-bottom;
}

You might as well add the table fix in the custom IE CSS yeah, but it doesn't really matter as you are going to be getting rid of the table in the future anyway.

smeggle

Nice one serbian - worked a treat.

I'm working on the content areas now