SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    May 2003
    0 Post(s)
    0 Thread(s)

    Background problems

    stupid questions coming, but it's been a long day ...

    If you look here you'll see my problems. Basically, the way i want it to look is the way it looks in mozilla at the moment (1024x768).

    problems being :-

    - if i make the browser smaller the background (film reel thingy) doesn't stretch all the way across the screen anymore.

    - In MSIE 6 Win the text is stretching out the box , how can i stop it from changing the size?

    thanks for any help
    Last edited by benji; Oct 30, 2004 at 17:37.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    Are you talking about the fact that your film reel is 100% wide but when you narrow the window a scrollbar appears because of the wide text-boxes. Then when you scroll right to read the boxes then the film reel background doesn't carry all the way across?

    If this is what you mean then the problem is that you have specified 100% which is 100% of the window. It can't be both 100% of the window and also the width of the content hidden off screen. It doesn't work like that I'm afraid (although it would be useful at times ).

    You will either have to specify a width for your filmreel to match the content and then it will stay behind the content even when accessed by the scrollbar. (e.g. make it 1024px wide). However on screens wider than 1024 then there will be no background unlike the 100% width version.

    So the best thing for you to do is to put the film reel image into the background of the body and then it will be there at any resolution even when horizontally scrolled.

    In MSIE 6 Win the text is stretching out the box , how can i stop it from changing the size
    I assume you are talking about the height of the text box as compared to mozilla? You can of course set overflow to hidden but obviously this will hide the text as well. What you need to do is make the text content the same size in both browers. To do this you need to take care of padding/margins and set a specified line-height.

    If I've understood correctly then here is the code to achieve all that:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
    <html xmlns="" xml:lang="en" lang="en">
    <style type="text/css" media="all">
    background:#3B4567 url(#.gif) repeat-x 0 95px;
    h1{font:italic 19px Georgia, serif;color:#CC9900;border-bottom:1px solid #c2c2c2}
    p,ul,address{font:13px Verdana,Arial, sans-serif;color:#666}
    ul,li{margin:0 0 0 12px;padding:0}
    li {line-height:1.8em}
    ul li ul{color:#3B4567;font-size:11px}
    a:link, a:visited{color:#666;text-decoration:none}
    ul li ul a:link, ul li ul a:visited{color:#3b4567}
    ul li ul a:hover{color:#cc9900}
    #header{margin:20px 0 0 10px}
    #textblock1{background:#fff;width:444px;height:263px;position:absolute;top:35px;left:10px;border:1px solid #999;margin:33px 10px ;padding:10px}
    #textblock2{text-align:right;background:#fff;width:444px;height:263px;position:absolute;top:35px;left:494px;border:1px solid #999;margin:33px 10px;padding:10px}
    <div id="header"> <a href="#"><img src="#" width="406" height="52" alt="" /></a> 
    <div id="filmreel"> 
    <div id="textblock1"> 
    	<h1>Who are ?</h1>
    	 <li>L< /li>
    		 <li><a href="<A href="#">BBC</a">">BBC</a> </li>
    <div id="textblock2"> 
    	<h1>Contact Us</h1>
    	<br />
    	<em>Text</em><br />
    	text<br />
    	text<br />
    	text<br />
    	<br />
    	<em>Tel:</em> 020 <br />
    	<em>Fax:</em> 020 <br />
    	<br />
    	<script language="javascript">eval(unescape('%76%61%72%20%73%3D%27%61%6D%6C%69%6F%74%69%3A%66%6E%40%6F%68%73%6F%6F%73%74%72%65%69%76%65%63%2E%73%6F%63%6D%27%3B%76%61%72%20%72%3D%27%27%3B%66%6F%72%28%76%61%72%20%69%3D%30%3B%69%3C%73%2E%6C%65%6E%67%74%68%3B%69%2B%2B%2C%69%2B%2B%29%7B%72%3D%72%2B%73%2E%73%75%62%73%74%72%69%6E%67%28%69%2B%31%2C%69%2B%32%29%2B%73%2E%73%75%62%73%74%72%69%6E%67%28%69%2C%69%2B%31%29%7D%64%6F%63%75%6D%65%6E%74%2E%77%72%69%74%65%28%27%3C%61%20%68%72%65%66%3D%22%27%2B%72%2B%27%22%3E%69%6E%66%6F%40%73%68%6F%6F%74%73%65%72%76%69%63%65%73%2E%63%6F%6D%3C%2F%61%3E%27%29%3B'))</script>
    	<noscript />
    	<a href="<A href="mailto:%69%6E%66%6F%40%73%68%6F%6F%74%73%65%72%76%69%63%65%73%2E%63%6F%6D">info(at)</a></NOSCRIPT">mailto:%69%6E%66%6F%40%73%68%6F%6F%74%73%65%72%76%69%63%65%73%2E%63%6F%6D">info(at)</a></NOSCRIPT> 
    If i've misunderstood then I've wasted my time and yours


    BTW Why don't you make those text boxes a fluid width so that people with 800x600 dont have to scroll to see the content.
    Last edited by Paul O'B; Oct 31, 2004 at 05:54.


Posting Permissions

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