Div Not Cascading height 2

[bam720]

http://www.aspexpos.com/new/contact.html

In IE 6/7 this looks fine. In FF the div under the form tag isn't creating a backdrop for the entire form (as it should). I have applied the "alternate" style way too many times because its simply not cascading. Am I doing something wrong? Originally all the spans inside the div were divs as well. The pink boxes are for testing purposes only, just to see where everything lies.

 

[monksnake]

I can tell you quick fix. You can hard code a height in the area I highlight.

<form action="" style="alternate ">
<div class="alternate" style=" border: 1px solid #FF00FF; ">
	<span class="alternate" style="margin: 10px; border: 1px solid #FF00FF; [!]height:334px[/!]">

Normally putting a height on a span wouldn't work, but since you have it as display:block, it will work.

Really though, if you are going to use a span with display:block, it's better to just use a <div>.

<.

 

[BabyJeffy]

...Really though, if you are going to use a span with display:block, it's better to just use a <div>.

Except when you want the no CSS version to collapse up into the same line - whereas using a div would force it to the next line

Am I the only one that likes to make markup present well without styles?

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[monksnake]

Am I the only one that likes to make markup present well without styles?

Yes.

<.

 

[traingamer]

Am I the only one that likes to make markup present well without styles?

No.

 

[monksnake]

Oh man, I liked it when the answer was yes!!

<.

 

[BillyRayPreachersSon]

if you are going to use a span with display:block, it's better to just use a <div>

Another reason you'd want to do this is if you wanted the span inside an anchor... with a div, your code would not validate (block level inside inline == verboten).

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[monksnake]

Another reason you'd want to do this is if you wanted the span inside an anchor... with a div, your code would not validate (block level inside inline == verboten).

I can see this.
But is it really a good idea to have a span inside an anchor with display:block, as opposed to just putting display:block on the anchor itself and putting a "normal" span inside?



<.

 

[BillyRayPreachersSon]

I'm not saying it's better... but some crazy soul might want to attempt it ;-)



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

I can see this.
But is it really a good idea to have a span inside an anchor with display:block, as opposed to just putting display:block on the anchor itself and putting a "normal" span inside?

Depends if you want to add another 'hook' for some CSS.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[bam720]

BabyJeffy,
I really hate inline styles. To me they should be in an external file, for the reason of seperation. Most of the inline styles I use are just for testing purposes, to make it work, while I try and get all the kinks out. This helps when I already have something working on another page that uses a style and needs tweaking for another page.

In this case I use alternate on all ym other pages and it displays fine in both IE and FF, just this page is causing issues. I may just create another style, but I like re-using style as much as possible.

Monksnake,
I didn't even realize I had the display block there, I have used it as a div everywhere else in my site so far, and thus hadn't even thought of that. Your quick fix worked, so I may just ahve to create another style for it or something.

 

[BillyRayPreachersSon]

Jeff meant that the markup should display well without styles, which is totally different to what you thought he meant (that you should not use inline styles).

You can turn styles off in many browsers to see your page how screen readers & search engines (and text-based browsers) would render your pages. Div elements put their cnotent ona new line (block level), whereas span elements are inline.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

Like Dan says... I mean't viewing the page in something like Firefox, with the Web Developer toolbar installed and the CSS disabled via one of it's myriad of options

But we share the same thoughts about inline styles... I attempt to externalise them before production time.

I did come across the need to inline some of the styling recently... I was attempting to fade an image in to the page (requires javascript) and found that I had to set the opacity styles inline in order to get access to them via javascript -- having them in a stylesheet was not good enough. Bit of an edge-case, really

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[bam720]

Jeff,
I've heard about the WebDev toolbar for a while and never tested it. I'm giving you a star for finally making me try/use it

 

[BillyRayPreachersSon]

The Web Dev Toolbar is a great add-on, although I find I use it less and less these days with the major v1 update to Firebug (which I can highly recommend). However - there are still invaluable features I do use.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]