View Full Version : borders & bg colours don't show.

02-13-2011, 03:28 PM
Hi All,
Having another go at this build with DIVs & CSS again and in trouble already.
To help in design view I've added (to be binned later) a border and bg colour to a div called content_1.
In live view and on-line neither shows.
I tried removing this from my CSS:
img /* Used to stop borders on rollovers */{ border-style: none; }
but that made no difference.
Also when viewed in live view or online the whole div drops about 30px.
URL is: http://www.mochdrenews.co.uk/brazil/
CSS is: http://www.mochdrenews.co.uk/brazil/brazil_main.css
Z index is 40, highest of all on page.
Gene Stevo.

02-13-2011, 07:34 PM
Thanx for this post Gene, precisely the sort of thing your fellow newbies like me can dig into and puzzle-solve. Others shall post better answers in the next 24 hrs but in the immediate moment I've looked at your code and was able to make the border work, and did so by moving things around. I see several things:
1) starting from line 39 you have 5 image tags that are not closed.


should be />

2) you've got divs walking all over each other to get positioned; I moved them around a bit and the border starting working. I still haven't discovered the one thing that solves the problem, but your SA picture seems to play a role in it. Moving content_1 above or below it makes the border work.
3) you have a hoard of unnecessary code in your css with the z elements & visibility & such.
4) your use of absolute positioning may also be working against you here as well.
Again, more competent answers are sure to follow but this has been fun to play with... G'luck with it...:grin:

02-13-2011, 10:54 PM
Hi John,
Huge thanks for delving into the soup that is my CSS. Since posting this however I've been out for a few pints, come home, had a fiddle and can make the following addendumeunmssss.
1) I always test live and the w3c CSS validator always tells me to remove the forward slash in this context. Don't know why but I've just done CSS validation and got a "no errors" response.
2) The divs are walking over each other so I can produce a rollover fueled nav bar where the buttons "appear" to share the same space. See how the buttons dovetail/jigsaw(ish) into each other, you can't do that in tables (not without half a day with a slice tool and another half day with behaviours).
3) Re Z index, I tried to force what I imagined to be a necessary sequence of layers (years of photoshop can do that to a mind). The visibility stuff is care of CS5 putting it in after me playing with the AP Elements tab.
4) I thought the only thing I'd positioned absolutely was the original container div?
Actually what is happening is that the div itself is disapearing up the screen out of sight whilst the content (more or less) obeys the positioning values. So it's not that the border/bg colour isn't showing, it's just out of sight. And no, I haven't got a clue how this can happen. Makes no sense to me at all how content can show out of it's container. More reading perhaps
Re the SA image. I think you're right, I thought I could let it just hang out of the bottom of my masthead div (with visibility set to visible) and it wouldn't interfere with other stuff. Clearly it does.
Round two tomorrow then.
BTW...If anybody wants to add to this and I don't respond in a hurry it's because I'm waiting for my son to phone and tell me that...I'm a grandad. There, I've said it, I'm OLD (53).
Yippee, I can't wait for the oportunity to gloat as his daughter puts him through the same nightmare he's put me through :)
And John from Dallas, genuine thanks for taking the time to investigate and respond.
TTFN (and if anybody is interested I lost at pool 6-4, too much stress)
Gene Stevo.

02-14-2011, 01:00 AM
He was pregnant too???:-D

Seriously though, Congrats!!