Unpredictable text formatting -- F5 fixes it

HTML & CSS
1

Hi. My text unpredictably will disregard it’s container and go trotting off the right side of the screen.

The code snippet

	<div id="content">
		<h3>But I just have a Question</h3>
		<div id="mainleft">
			<ul>
				<li><img src="images/stress2.jpg" id="animimage" alt="stressed lady" height="168" width="125" /></li>
			</ul>
		</div> <!-- end mainleft -->
		<div id="mainright">
			<p>Besides ... </p>
				<p>Just call ...</p>
				<p>Patient, thorough, ...</p>
		</div> <!-- end mainright -->
	</div> <!-- div content -->

and the css

#mainleft ul {
	float: left;
	width: 175 px;
	list-style: none;
	font-weight: bold;
	margin-left: 20px;
	margin-top: 0px;
	margin-right: 20px;
}
#mainleft li {
	padding-top: 15px;
	padding-bottom: 15px;
	margin-left: -15px;
	margin-right: 15px;
}
#mainright {
	float: left;
	margin: 2px;
	width: 310px;
	margin-top: -15px;
	text-align: justify;
}
.clearme {	
	clear:both;
}

This symptom crosses all pages. Most of the time it comes up fine. Sometimes the test simply wanders off the right hand side of the scree. Clicking F5 (refresh) resets it fine. Any ideas? (The container is position: absolute)

Thanks

2

Show a link so we can see the symptom.

Why?

3

http://www.brianlcase.com

Two main reasons:
I wanted my content to come as close to the <body> tag as possible (or so SEO suggets)
Seond, I give up on trying to position things with floats and so forth, so opted to created a background gif with everything that didn’t chage so I could concentrate my css and xhtml on the things that did.

As I move forward I may reconsider. But I don’t have a great deal of time or desire to fool with all the css intrigues,

Here’s the main css

	body {
		margin: 0px;
		padding:0px;
		text-align:center;
		background-color: rgb(245, 200, 156);
		color: rgb(138, 69, 0);
	}
	
	#wrapper {
		position: relative;
		top: 0px;
		left: 0px;
		width:800px;
		height: 615px;
		background: url("images/backdrop.gif")
     top left no-repeat;
		margin: 0 auto;
		text-align:left;
		padding:0;
	}
	#rotator {
		position: absolute;
		width: 125px;
		margin-left: 110px;
		margin-top: 45px;
	}
	#content {
		position: absolute;
		margin-top: 250px;
		margin-left: 234px;
		width: 566px;
	}
	#content h3 {
		text-align: center;
		margin: 0px;
	}
	#content p {
		padding-left: 15px;
		padding-right: 15px;
		width: 535;
		text-align: justify;
	}
4

I can’t seem to duplicate the issue. Does it happen on a specific browser?

Hopefully, this attachment will make you reconsider sooner rather than later:

5

Unfortunately, there’s a basic flaw in that approach. I can’t reproduce your problem of text wandering off the right-hand side - but the text spills out over the bottom of your background gif without me even trying. My default font size is set to 16px, which is pretty standard, but it’s too big for your design. I have to reduce it to fit the text over the background, otherwise the last couple of lines are illegible.

6

[QUOTE=imaginekitty;5035224]I can’t seem to duplicate the issue. Does it happen on a specific browser?
Curious, isn’t it? The problem occurs on my preferred browser: Firefox 9.0.1 intermittently.

I’m encouraged that it doesn’t seem to repeat the symptom on Safari, Chrome or Explorer. It’s just with 35+ years as a mainframe applications guy, ignoring an intermittent symptom during the test stage often led to many a three-oclock-in-the-morning production call.

7

Rats. Okay – back to the css jungle. ^&()$&**&()

8

Technobear – please excuse my bad manners. Thank you for finding a flaw that I didn’t anticipate.

grNadpa

9

What am I? Chopped liver? LOL

10

Your screen shot wasn’t approved at that stage, so the message was probably not received … as there wasn’t a text alternative. :stuck_out_tongue:

11

HAHAHA! :smiley:

12

Well the most important think on the page is the h1 heading and you don’t even have one! Don’t start messing around with the content as you have made it worse for seo rather than better. There is little benefit (or very slight) from moving content higher up the html in most cases but it is much more important to have logical and structured headings, html and meaningful content.

Don’t set heights on containers that hold text content but let the content dictate the height and then it doesn’t matter what size the users text is as the page just expands downwards a little more.

If you find an intermittent bug then take a screenshot otherwise we may not be able to see what you are seeing if it works this end. usually a screenshot will reveal what is going on (if you are lucky).