ie css display issue, I need advice

cjoki

Hello, I have a website www.redash.org and I have recently updated the site to use html5. Everything looks good except for some weirdness displayed in ie (no surprise, I know) and was hoping to get some advice to address it. From the main website go to system basics and then select powers from the right side menu. From the drop down select a power (like bite). Under the description is where the issue is. In ie there is a space between "form" and "usage". This is not suppose to be there yet I have not been able to get it to display like it does in ff. Any ideas?

phil o

As we can't see the code that populates the 'power_display' div, it's difficult to see what's happening with this formatting issue. Could you post a small code-snippet of the inner html of this div ?

cjoki

yeah that may help... here ya go :)

<div id="power_display">
<header>Bite</header>
<div id="power_desc">
<span class="bold_label">DESC: </span>Many creature have teeth as a physical way of consuming food, but they do not gain a bite that can be used in combat.<br>
<p>In Red Ash this is split into the following categories; None, Carnivore, Herbivore and Omnivore. The teeth of an Carnivore are made for eating flesh and do piercing damage. The Herbivore has teeth made for crushing plants and will do bludgeoning damage. The Omnivore's teeth are meant for a more varied diet and are generally smaller and do half the damage of the others (piercing or bludgeoning).</p>
</div>

<div id="pap"><span class="bold\_label">PAP: </span>2</div>
<div id="map"><span class="bold\_label">MAP: </span>0</div>	
<div class="power\_type"><span class="bold\_label">Type: </span>Combat, Alternative Attack</div>
<div class="power\_form"><span class="bold\_label">Form: </span><span class="underlined">Bite, Small</span></div>
<div class="power\_form\_etc"><span class="bold\_label">Usage: </span>Permanent</div>
<div class="power\_form\_etc"><span class="bold\_label">Base Cost: </span>-100</div>
<div class="power\_form"><span class="bold\_label">Form: </span><span class="underlined">Bite, Ideal</span></div>
<div class="power\_form\_etc"><span class="bold\_label">Usage: </span>Permanent</div>
<div class="power\_form\_etc"><span class="bold\_label">Base Cost: </span>-200</div>
<div class="power\_form"><span class="bold\_label">Form: </span><span class="underlined">Bite, Large</span></div>
<div class="power\_form\_etc"><span class="bold\_label">Usage: </span>Permanent</div>
<div class="power\_form\_etc"><span class="bold\_label">Base Cost: </span>-300</div>
<div class="power\_form"><span class="bold\_label">Form: </span><span class="underlined">Bite, Huge</span></div>
<div class="power\_form\_etc"><span class="bold\_label">Usage: </span>Permanent</div>
<div class="power\_form\_etc"><span class="bold\_label">Base Cost: </span>-400</div>

</div>

phil o

For 'Form', the content is encapsulated in a span (maybe for the underline feature) => what if you try another way to underline the content (i.e. not in another spam) ? Maybe you won't have the space after if you don't encapsulate in another span. Something like :

<div class="power_form"><span class="bold_label">Form: </span><u>Bite, Small</u></div>

It's just a guess ; what I see is that there's a difference with other fields in the layout. Maybe that difference is not interpreted the same way in IE.

cjoki

thanks for the reply, sadly the <u> tag is not a part of html5, so I would rather not use it. I may need to make a change to the design and providea different visual cue to the form. I am using it to distinguish between the start of one form and the end of another...I will work on it tonight and let you know how it goes.

cjoki

I did a redesign and got rid of may of the divs used inside the form area (usage, base cost, etc..), replacing them with br's. I also got rid of the span with the underlined class. IE seams to be ok with this new layout and is behaving itself. Exact cause of the display error...not sure although I suspect the underlined class was playing a part in it. thanks for you efforts. Chris

phil o

You're welcome ! Sorry for replying so late but I was out of office the whole last week.

W Balboos GHB

Thanks for that successful battle w/IE. I went through the HTML5 exercise, as well, but my main annoyance was getting rid of and other such deprecated tags. I haven't experience your specific problem because I'm somewhat of an HTML minimalist (probably from being a C programmer for many years). By minimalist, I mean that I generally do my line-feeds with br and text appearance with span. div get its play, primarily because of items that won't work in the span/br methods, such as text-align. It's from an impulse to maintain control. The only p tags on my websites are legacy from when I used FrontPage - and they're disappearing as time permits. From your experience, I was innocently lucky.

"The difference between genius and stupidity is that genius has its limits." - Albert Einstein

"As far as we know, our computer has never had an undetected error." - Weisert

"If you are searching for perfection in others, then you seek dissappointment. If you are searching for perfection in yourself, then you seek failure." - Balboos HaGadol Mar 2010

cjoki

Thank you for your words, I feel that with the promiss of html5 and css3 we face interesting times ahead. My current design will most likely change a bit more as I back off of the overly flexible layout to a more traditional centered and fixed width layout. This flex layout I have was a fun idea, but I see issues with this design such as if I want to add a banner exchange. Ah well, the fun never ends, and honestly would we ever really want it to? All the Best! Chris J