SPAN heights irregular

[nethnet]

So I've been developing my website for a while now, and I use Opera web browser to test it, and I just recently realized that this was a bad idea (well, maybe not bad, but naive).  Sure enough, as soon as I opened it in IE I noticed an error in how I want part of my layout to be displayed.  It's correct when viewed in Opera, but in IE the heights of my SPAN tags are not how I want them to be.  I realize that most of you don't have Opera and IE to view my page in and see for yourself, so I'm including screenshots of what's going on here.

 

In Opera, the correct way:

 

In IE, the INcorrect way:

 

<div id="main">

<h1>nethnet.com desktop</h1>

<div class="center">
<span class="desktop"><img src="images/repository.png" /> Repository</span>
<span class="desktop"><img src="images/tutorials.png" /> Tutorials</span>
<span class="desktop"><img src="images/news.png" /> News</span>
<span class="desktop"><img src="images/documentation.png" /> Documentation</span>
</div>

<p><strong>Nethnet.com</strong> is a free online archive of lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat</p>

<p>Consectetuer adipi elitagna veni!</p>

<p class="comments align-right clear">
<a href="index.html">Read more</a> : 
<a href="index.html">comments(3)</a> : 
1.25.08
</p>

</div>

 

The CSS that corresponds to what is going on here is:

 

/* main column */

div.center {
text-align: center;
}

#main {
float: right;
margin: 0; padding: 0;
width: 545px;	
}
#main h1 {
margin: 10px 0;
padding: 4px 0 4px 8px; 
font-size: 105%;
color: #FFF;
text-transform: uppercase; 
background-color: #CC0000;	
letter-spacing: .5px;
}

#main span.desktop {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
font-size: 105%;
font-weight: bold;
border: 1px solid #333;
height: 20px;
}

 

This is probably something really simple, but how do I get the border of the SPAN style to run through the images like it does by default in Opera?  Thanks in advance for any help.

 

Regards,

 

Theo

[dbrimlow]

Well, before even beginning to help find a solution for your dilemma,  I can tell you that you are using "span" incorrectly - which is surprising since otherwise you use quite well formed semantic markup.

 

You are using the span element as a block level TEXT container and "styler" instead of using a proper text container ("block level logical tag"). Span is not a block tag. It is a style element.

 

Span is just a quick style insert tag used only to alter the appearance of a section or "span" of text - within a given paragraph, list (or other such "block-level logical tag") - from the  styling of the paragraph's main select (class or id) ... like so:

 

<p>
<strong>Nethnet.com</strong> is a free online archive of <span class="someclass"> loerm ipsum dolar sit amet</span>, consectetuer adipiscing...
</p>

 

Text must be constrained within proper "logical block level tags" (p, li, etc.) and never just left naked and flappin' in the breeze within a select, table cell or just in the body.

 

In your case I would suggest using a list and include "display:inline" in the css for the li. And since you are already using very clean well formed semantic markup, avoid unnecessary additional code in your markup and "DIVitus" by using the class within the tag itself (instead of "div").

 

The markup would be something like:

 

<ul class="center">
<li class="desktop"><img src="images/repository.png" /> Repository</li>
<li class="desktop"><img src="images/tutorials.png" /> Tutorials</li>
<li class="desktop"><img src="images/news.png" /> News</li>
<li class="desktop"><img src="images/documentation.png" /> Documentation</li>
</ul>

 

THAT said, you should also avoid the naming conventions in your css of designating "div.someclass"                        or "span.someclass"; this just forces you to use "div" or "span" exclusively for those selects and they would not work with the example above. Whereas if you just designate the select itself ".someclass", you can use it for any tag within the markup ... including div or span.

 

Also, why limit those choices to your select id "#main"? I don't know where this type of naming convention came from, but it is too common and just tends to cause more and more confusion and frustration among css beginners and people who help them.

 

CSS is about removing limitations, not reassigning them. In engineering the best solution is the simplest. Just name your selects independent of each other unless there is a specific reason not to.

 

#main is a column container. In future you may have many more base tag level style changes you want to make, so instead of naming the previous .center and .desktop to just ul and li under #main, create a one time id for the navbar. So your css basically changes to this:

 

/* main column */

img {border:none}

#main {float: right; margin: 0; padding: 0;width: 545px}

#main h1 {margin: 10px 0;padding: 4px 0 4px 8px; font-size: 105%;color: #FFF;
text-transform: uppercase; background-color: #CC0000; letter-spacing: .5em 
<!-- there is no .5px, use em or % -->}

.center {text-align: center}<!-- this can now be used anywhere, anytime in your document. -->

/* Nav Bar */

#navbar ul {margin:0; padding:0}

#navbar li { list-style-type:none; display:inline; margin:0 .5em; padding: .25em;
font-size: 105%:font-weight: bold;border: 1px solid #333; text-align:center;}

<!-- removed height from navbar li because you use % for the font, and
the effect you want can be done with negative top margin for the img tag.
IE 6/7 and modern browsers display this differently so you may want to find a happy medium
or you can change the valuse using an  for IE only"conditional comment" - 
this will use a different value for any IE from the proper valuse in the css that 
all modern browsers will use.   -->

#navbar img {margin:-8px 0 0 5px} 

<!--  And of course, you are using a float ... floats MUST be cleared. 
Let's add the clear to your css for the list.  -->


/* FLOAT CLEARING
----------------------------------- */
/*for modern browsers*/

#navbar:after  {content: "."; display: block; height: 0;font-size: 0; line-height: 0; clear: both; visibility: hidden;}

/* HasLayout fix for IE7 only*/

*+html #navbar {min-height: 1px;}

/* HasLayout fix for IE6 only*/

* html #navbar {height: 1%;}

 

Now the markup is even simpler.

 

<div id="main">

<div id="navbar">
<ul>
<li><img src="images/repository.png" /> Repository</li>
<li><img src="images/tutorials.png" /> Tutorials</li>
<li><img src="images/news.png" /> News</li>
<li><img src="images/documentation.png" /> Documentation</li>
</ul>
</div>

<p><strong>Nethnet.com</strong> is a free online archive of lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat</p>

<p>Consectetuer adipi elitagna veni!</p>

<p class="comments align-right clear">
<a href="index.html">Read more</a> : 
<a href="index.html">comments(3)</a> : 
1.25.08
</p>

</div>

 

Okay. The START of the necessary css components are in place (so far as I know without seeing the rest of all the markup and css) for the #main select column. Certain things can be tweaked to taste or adjust layout.

 

This is (or at least should be) fully cross-browser/platform compliant.

 

 

[dbrimlow]

Also, just noticed this:

 

<p class="comments align-right clear"> 
<a href="index.html">Read more</a> : 
<a href="index.html">comments(3)</a> : 
1.25.08
</p>

 

what is - class="comments align-right clear"?

 

Is it the html output of php or jscript or some other script/language tag?

 

[nethnet]

<p class="comments align-right clear">

 

This is just a <p> tag with 3 classes (I don't think that part of the CSS was included in this thread.. sorry about that.. I assure you it's in my stylesheet though).  I realized I was using <span> incorrectly, but it yielded the results I wanted in Opera, and I was hoping there was some way to get it to work the same way in IE and other browsers (i.e. where the black border runs through the middle of the images).  Anyway, I'm going to switch it to a list like you suggested, and see if I can tweak that to get what I want.

 

Thanks for the help, I'll post again if I get more frustrated

 

Theo

[dbrimlow]

Thanks for the help, I'll post again if I get more frustrated

 

LOL, oh you will ... to both!

 

The technique I proposed (using negative margin for the img) is more an art than a science.

 

But it should provide the effect you are looking for. I am actually curious to see how it works, as well.

 

I used it on a few of my sites' text based lists to align the bottom of the text based navbar with a color block of the main container background image to provide a "tabbed" effect when "onpage".

 

These sites all use it for the navbar:

 

stocknyc

maiproperties.com

dbrimlow

bluesmandeluxe.com

 

And each one has a separate IEonly.css file that has to tweak the amount of the negative margin for IE.