CSS advise for better performance

HTML & CSS
1

I’m working on a layout issue across browsers. I’m asking if anyone wants to suggest an alternative approach to get more flexibility to control the position of elements in my layout across various platforms and browsers. I’ve run out of ideas.

Here is an test example of the content layout,

<div id="intro">
	<div class="col_3_two">
		<p><span>Is nary optimum something Thurs </span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
	</div>
	<div class="col_3_three">
		<p id="pTwo">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>	
	</div>
</div>

The focus here is the span element. This selects the text I want to change for the CSS, and if the page displays without CSS, the text simply displays normally.

Ideally the goal is to have the span flush to the right side of the second column and extend to a variable length into the first column. Something like this.


<---SSSSSSSSSPAN   BBBBBBB
        AAAAAAAA   BBBBBBB
        AAAAAAAA   BBBBBBB
        AAAAAAAA   BBBBBBB
        AAAAAAAA   BBBBBBB
        AAAAAAAA   BBBBBBB

The CSS I’m using has column 2 and 3 as floats left. Then the span is positioned relative in the enclosing P tag for column one (AAA). The span also has the text-align right property. The P tag for column two (BBB) is positioned relative wo adjust the baseline to align with column one (AAA). (You can imagine this when you read the above html if you understand my div syntax: col_3_[one, two, three] is my three column class for each individual column.)

It looks swell on Firefox, but Chrome for some reason pulls some of the next line (AAA) up. Safari and Opera and everything on XP send the last word of the SPAN down into the first line of the second column (AAA).

I would like to hear other suggestions to get the first span to behave, align right, keep the span to one line and keep the words of the next line (AAA) from going up into the span area.

Chris

2

Hi,

For IE6 you need haslayout on the parent and an inner element in the span to make IE6 behave.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Testing text positioning on WINXP-IE6</title>
<style type="text/css">
<!--
/* from linked style sheet */
* {
    margin: 0;
    padding: 0;
}
#wrapper {
    width: 100&#37;;
    height: 100%;
}
#content {
    width: 80%;
    margin: 0 auto;
}
#intro {
    clear: both;
    display: block;
    width:100%;
}
/* =Default_layout.css */
.col_3_two {
    float: left;
    width: 31%;
    margin: 0 2% 0 0;
    display: inline;
}
.col_3_three {
    float: left;
    width: 31%;
    margin: 0 0 0 0;
    display: inline;
}
/* =Text, tags */
body {
    font: 62.5%/1.4 Verdana, Arial, Helvetica, sans-serif;
}
/* =This Page - styles */
/* =Intro */
#intro .col_3_two {
    margin-left: 33%!important;
    display: inline;
}
#intro .col_3_three {
    display: inline;
}
#intro .col_3_two p, #intro .col_3_three p {
    /*font-size: 1.6em;
    line-height: 1.8em;*/
    font-size: 16px;
    line-height: 28px;
    color: #666666;
    vertical-align: baseline;
    display: inline;
}
#intro .col_3_two p span {
    position: relative;
    top: 0em;
    right: 4%;
    margin: 0 0 0 -50em;
    text-align: right;
    display:block!important;
    /*font-size: 2em;
    line-height: 2.4em;*/
    font-size: 36px;
    line-height: 1.2;
    overflow: visible;
}
#pTwo {
    position: relative;
    top: 0em;
}
/* Holly Hack \\*/
* html #intro p span b {
    zoom:1.0;
    position:relative;
}
*+html #intro p {
    zoom:1.0;
}

#intro p span b {font-weight:normal}
/* END hide from IE-Mac */
.clear {
    clear: both;
}

-->
</style>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <p class="clear"><?php print($_SERVER['HTTP_USER_AGENT']); ?></p>
            <hr />
            <div id="intro">
                <div class="col_3_two">
                    <p><span><b>There is something you should know</b> </span>This is example one where the SPAN is relative positioned in parent that is relative positioned, P tag, in a floated DIV. All width and margin properties in the horizontal plane are measured in % and fonts are in EMs. Vertical measurements, which were in PXs have been removed. </p>
                </div>
                <div class="col_3_three">
                    <p id="pTwo">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>    
                </div>
            </div>
        <!-- END CONTENT -->
        </div>
    <!-- END WRAPPER -->
    </div>
</body>
</html>

IE7 needed haslayout on the p element also.

3

That’s not quite true as the height:1% fails when negative margins are involved and height:1% does not fix the layout as shown in my first example and as I documented years ago here. (Which are also confirmed in tests [URL=“http://www.brunildo.org/test/relayout.html”]here and [URL=“http://www.satzansatz.de/cssd/onhavinglayout.html”]here).

My layout fulfilled the requirements of the poster:

Ideally the goal is to have the span flush to the right side of the second column and extend to a variable length into the first column.

Yours has different dynamics and is controlled by width but that’s not to say that it may actually be more appropriate.

4

Haslayout is often referred to as a cause for IE problems. In my troubleshooting I diagnosed the double margin and negative margin bugs. Is it the case I mis-diagnosed the problem, and the cause was the span did not have-layout? Or are you suggesting these bugs are caused by the haslayout requirement? Chris

5

The problem with haslayout is that it only rears its head when circumstances dictate.

On simple layouts it isn’t an issue but once you start nesting any complicated elements that need to be accountable then haslayout becomes an issue as elements only take full care of their boundaries when they are in haslayout mode.

You can’t however apply haslayout willy nilly as this is likely to trigger other bugs and unwanted side effects along the way.

In Ie7 the problem was haslayout missing from the p element that was holding a complicated span. IE6 on the other hand couldn’t cope and needed more solidifying with an inner element also in haslayout mode.

When you use negative margins in IE you have to also add position:relative or the portion that sticks out is often not drawn (or actually drawn under the background). Position:relative triggers another layout algorithm in IE which can often fix these minor issues but the algorithm is fragile at best and should not be overused. Sometimes you will need to remove or follow through with position:relative from parent to child in order to maintain the layout.

There is no one magic fix and each case is taken on its merits and acted upon accordingly. In most cases there is a solution somewhere along the line but it’s finding the right triggers to get what you want that is the problem. :slight_smile:

6

Like a bad penny…
I’ve been trying to work out the kinks and there are a surprising number of them. Let me say Paul’s code works. Its when I started adjusting the type and putting it back into my template it all went a bit sideways.

The first version cut off the decenders from the type. To fix this I adjusted the type sizes and set line-height. Then I applied what I thought I knew to my template…

I also added an ID to this second version to shift the P to align nicely. This time the type was cut off like a negative margin bug. And the typical fix, position:relative, is already applied. To boot, I tried a ZOOM fix only to see the whole SPAN disappear! Then, I noticed I mistyped the height:1px fix for has layout and pop, same trouble as ZOOM. My span is gone, poof!

This page validates both HTML and CSS…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Testing text positioning on WINXP-IE6</title>
<style type="text/css">
<!--
/* from linked style sheet */
* {
	margin: 0;
	padding: 0;
}
#wrapper {
	width: 100%;
	height: 100%;
}
#content {
	width: 80%;
	margin: 0 auto;
}
#intro {
	clear: both;
	display: block;
}
/* =Default_layout.css */
.col_3_two {
	float: left;
	width: 31%;
	margin: 0 2% 0 0;
	display: inline;
}
.col_3_three {
	float: left;
	width: 31%;
	margin: 0 0 0 0;
	display: inline;
}
/* =Text, tags */
body {
	font: 62.5%/1.4 Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: .05em;
}
/* =This Page - styles */
/* =Intro */
#intro .col_3_two {
	margin-left: 33%!important;
	display: inline;
}
#intro .col_3_three {
	display: inline;
}
#intro .col_3_two p, #intro .col_3_three p {
	/*font-size: 1.6em;
	line-height: 1.8em;*/
	font-size: 16px;
	line-height: 28px;
	color: #666666;
	vertical-align: baseline;
	display: inline;
}
#intro .col_3_two p span {
	position: relative;
	top: 0em;
	right: 4%;
	margin: 0 0 0 -50em;
	text-align: right;
	display: block!important;
	/*font-size: 2em;
	line-height: 2.4em;*/
	font-size: 36px;
	line-height: 36px;
	/*zoom: 1;*/
	overflow: visible;
}
#pTwo {
	position: relative;
	top: 0em;
}
/* Holly Hack \\*/
* html #intro p span {
	height: 1px;
}
/* END hide from IE-Mac */
.clear {
	clear: both;
}
-->
</style>
</head>
<body>
	<div id="wrapper">
		<div id="content">
			<p class="clear"><?php print($_SERVER['HTTP_USER_AGENT']); ?></p>
			<hr />
			<div id="intro">
				<div class="col_3_two">
					<p><span>There is something you should know </span>This is example one where the SPAN is relative positioned in parent that is relative positioned, P tag, in a floated DIV. All width and margin properties in the horizontal plane are measured in % and fonts are in EMs. Vertical measurements, which were in PXs have been removed. </p>
				</div>
				<div class="col_3_three">
					<p id="pTwo">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>	
				</div>
			</div>
		<!-- END CONTENT -->
		</div>
	<!-- END WRAPPER -->
	</div>
</body>
</html>
7

  1. markup seems overcomplicated, though personally I suspect what you are putting in the span should actually be a HEADING. As a block level sibling to ‘content’ areas that may be easier to implement.

  2. The holly hack has to be in %/ not px… frankly you are going nuts implementing a whole slew of contradictory values and browser specific trickery on something that should be piss simple. From the #wrapper that isn’t actually doing anything, to the clearing for nothing, to the use of percentage floats which are always a layout /FAIL/. (% + float == incidental drops cross browser since they can’t even agree what 31% works out to on the same width window)

  3. I see you bought into the 62.5% font-size lie. Likely explains why the layout is horribly broken on my machine since on large fonts/120dpi 62.5% delivers 12px, not 10px. Adding the ‘omit the line-height metric’ thing (which despite the claims of others around here does NOT work properly) only further exacerbates the problem.

Oh, and with all the floats, your comment placement (which ends up between/next to floats) is pretty much guaranteed to trip the double render and disappearing content bugs - which is why they should be moved inside the element being closed instead of after.

Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Layout Demo
</title>

</head><body>

<div id="pageWrapper">

	<h1>Layout demo</h1>
	<hr />

	<h2>There is something you should know</h2>

	<div class="column">
		<p>
			Just make the big text to the left a heading and float it left. You can then float the remaining two columns RIGHT and they'll stack proper... with no need for any extra browser specific hacking.
		</p>
	<!-- .column --></div>

	<div class="column">
		<p>
			Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		</p>
	<!-- .column --></div>

<!-- #pageWrapper --></div>

</body></html>

With this for the screen.css


/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

body {
	text-align:center; /* center #pageWrapper IE 5.x */
	font:normal 85%/180% verdana,helvetica,sans-serif;
	letter-spacing:0.05em;
	color:#666;
}

h1 {
	padding:0.12em;
	font:bold 180%/140% verdana,helvetica,sans-serif;
}

#pageWrapper {
	overflow:hidden; /* wrap floats */
	width:80%; /* also trips haslayout, wraps floats IE */
	min-width:760px; /* since too narrow is horribly broken */
	margin:0 auto;
	text-align:left;
}

hr {
	margin:0 0 0.2em;
}

.column {
	float:right;
	width:33%;
}

h2 {
	float:left;
	width:67%;
	margin-right:-1em; /* prevent accidental drop in IE */
	text-align:right;
	font:normal 180%/100% verdana,helvetica,sans-serif;
}

p {
	padding:0 0 1em 1em;
}

Should work all the way back to IE 5.0

Sometimes it’s better to NOT even THINK about playing with positioning… especially relative positioning.

8

Here, to keep the discussion focused on the troublesome CSS, I stripped or converted the content to nonsense, and left most of the tags. It only seems appropriate to make the SPAN an H element.

I’m sorry if its confusing. Its absolutely true some parts are superfluous in this example, because they are only useful in the original page. It was my plan to leave these in the case I was unaware of incompatible parameters. Happily this does not seem to be the case.

Chris

9

That would defeat the purpose of fresh perspective. :slight_smile: I made one mistake causing most of the problems. I set the display property to inline for the span instead of block. That solved the mixing of the span and p lines. I should have gotten that one. Your genius was to give that huge negative margin for the span. I’ve been thinking too precise. This was the breakthrough I needed. Cheers! :cool:

10

Hi,

It would have been better if you’d provided the css so we could see what you wanted as you say you have it working in Firefox.:slight_smile:

From your explanation it sounds like you want something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.col_3_two {
    float:left;
    width:200px;
    margin:0 0 0 200px;
    line-height:1.4;
    display:inline;
}
.col_3_two span {
    display:block;
    text-align:right;
    margin:0 0 0 -1000&#37;;
    color:red;
    position:relative;
}
* html .col_3_two span {
    height:1px
}
*+html .col_3_two p {
    height:1px;
}

.col_3_three {
    float:left;
    width:200px;
    margin:0 0 0 40px;
}
</style>
</head>
<body>
<div id="intro">
    <div class="col_3_two">
        <p><span>Is nary optimum something Thurs Is nary optimum something </span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="col_3_three">
        <p id="pTwo">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
</div>
</body>
</html>

However I don’t think that can be right as I don’t see much use for it.:slight_smile: