background image problem (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

vision2000 -> background image problem (12/8/2007 7:52:39)

Hi,

How do I remove the light blue line at the bottom of the page (before the bottom nav) in http://www.ihost-websites.com/WRIGHT

I used a 1000x1px background image for the left column but it's
messing up the bottom of the page.

Please advise
Thanks



Tailslide -> RE: background image problem (12/8/2007 8:02:27)

For reasons I won't bore you with I haven't got my usual computer and browser (i.e. FF web developer extension which generally answers these sort of questions) but from the look of it you've got this: 

<p><br class="clearboth"/>
</p>


After your main content are - remove that, add "clear:both" into your bottom nav style rule and that should do it.

Also - you've got a lot of these:

<p> </p>

Which is generally a bad idea. You'd be better off removing those and sticking a bottom margin of, say 20px onto both your content div and your sidebar - thus ensuring a bit of clearance.



vision2000 -> RE: background image problem (12/8/2007 8:53:21)

Thanks - I added clear:both to the bottom nav and removed clear:both
from the html page but I still see the blue line.

What am I missing?

If I add bottom margin:20px; to the content div will this separate the paragraphs automatically?
Please clarify (I'd like to create CSS)

Thanks



Tailslide -> RE: background image problem (12/8/2007 9:29:27)

Sorry I'm obviously losing it (too many mince pies!) - you want 20px bottom padding to the content div - not margin - a margin will show more blue. The padding will give space within the div.

As mentioned I can't really check it for you properly as I don't have the equipment at the moment (I'm on the mac for the next few days). If messing with the padding doesn't work then what you need to do is add a border to everything:

div {border:1px solid;}

That way you can see which elements are where. That might give more of a clue.

It could be a margin collapse issue - try adding a 1px top border to the bottom nav div and see if that moves it up (that's a long-shot actually).

If all else fails what I'd do with a fixed width layout like that would be to have a background image that's full width of the containing div which would have a blue stripe on the left and a wider white stripe on the right then repeat downwards as you are now - that way each bit gets the correct background image.



vision2000 -> RE: background image problem (12/8/2007 10:25:02)

Almost Fixed - I changed the background image to tile solid blue and white (I gave up on trying to keep the left col blue gradient)

Now how do I remove the small blue image appearing bottom left?

Thanks for all your input.




Tailslide -> RE: background image problem (12/8/2007 11:43:04)

Without checking it looks like the blue bit of the background image is too wide - remove the background colour of the main content area and you'll get a better idea of what's going on.



d a v e -> RE: background image problem (12/8/2007 11:52:43)

not sure how close to completion you are with your site but your header looks terrible! ;) (headerv5.jpg)

if you would like it optimising better and can send me a bitmap or tiff of the original (assuming that is clearer) then i will gladly do it for you

email it to gekkoweb[at]gmail.com ;)

btw i can't see a small blue image bottom left - oh wait you mean that small chunk? i think you could try to reduce the width of wrapperbg.gif by about 7px



vision2000 -> RE: background image problem (12/8/2007 15:09:55)

Thanks Dave...reducing the image by 7px fixed it.
Unfortunately I received the original image as a PDF file.
Am I correct in assuming you can't optimize this type of file?

I'll definitely ask the owner for the original (I didn't know it looked that bad:-)



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875