SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    288
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Unpredictable text formatting -- F5 fixes it

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

    The code snippet
    Code:
    	<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
    Code:
    #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. #2
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Show a link so we can see the symptom.

    Quote Originally Posted by Grnadpa View Post
    ... (The container is position: absolute) ...
    Why?

  3. #3
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    288
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    http://www.brianlcase.com
    Quote Originally Posted by imaginekitty View Post
    Why?
    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
    Code:
    	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. #4
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Grnadpa View Post
    I can't seem to duplicate the issue. Does it happen on a specific browser?

    Quote Originally Posted by Grnadpa View Post
    Two main reasons: ... 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,
    Hopefully, this attachment will make you reconsider sooner rather than later:
    abSol..gif

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,151
    Mentioned
    262 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Grnadpa View Post
    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.
    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. #6
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    288
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    [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. #7
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    288
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    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.
    Rats. Okay -- back to the css jungle. ^&()*$&**&()*

  8. #8
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    288
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Technobear -- please excuse my bad manners. Thank you for finding a flaw that I didn't anticipate.

    grNadpa

  9. #9
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Grnadpa View Post
    Technobear -- please excuse my bad manners. Thank you for finding a flaw that I didn't anticipate.
    What am I? Chopped liver? LOL

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by imaginekitty View Post
    What am I? Chopped liver? LOL
    Your screen shot wasn't approved at that stage, so the message was probably not received ... as there wasn't a text alternative.

  11. #11
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Your screen shot wasn't approved at that stage, so the message was probably not received ... as there wasn't a text alternative.
    HAHAHA!

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Grnadpa View Post
    http://www.brianlcase.com
    I wanted my content to come as close to the <body> tag as possible (or so SEO suggets)
    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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •