Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with div cutting off on cellphone and old ie browsers

    I haven't created a website in 2 years, so I know my coding is bad and you'll probably laugh! lol... but I could use some help. My head div background is being cut off when viewed on mobile phones and old versions of IE. If I remove all the code between the head div, it renders fine. Here is the code I am using. You can see how it looks at nolaking.com/work.php THX!

    Code:
    <body>
    <div id="head">
    <div id="head_contain">
    <div id="head_contact">
    <ul class="contact">
           <li class="phone">504 . 701 . 1158</li>
           <li class="email"><a href="mailto: email@nolaking.com">email@nolaking.com</a></li>
            </ul>
            </div>
    <div class="clear"></div>
    <div id="logo"><img src="images/logo_big.png" width="237" height="77" border="0" alt="" />
    </div>
        <ul class="menu">
           <li class="home"><a href="index.php">Home</a></li>
           <li class="serv"><a href="services.php">Services</a></li>
           <li class="work"><a href="work.php">Our Work</a></li>
           <li class="esti"><a href="#">Estimate</a></li>
           <li class="cont"><a class="active" href="contact.php">Contact Us</a></li>
            </ul> 
    </div>
    </div>
    </body>
    Code:
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-family: 'Merriweather', arial, serif;
    }
    title {
    	display: none;
    }
    script {
    	display: none;
    }
    .clear {
    	clear: both
    }
    #head {
    	height: 115px;
    	background: url(images/head_back.jpg) repeat-x 0 0;
    }
    
    #head_contain {
    	margin: 0 auto;
    	width: 1010px;
    }
    
    #head_contact {
    	float: right;
    	margin: 3px 45px 0 0;
    }
    ul.contact {
    	float:;
    	list-style: none;
    }
    ul.contact li {
    	margin: 0 0 0 20px;
    	color: #F5FC02;
    	font-size:12px;
    	float:left;
    	padding: 0 0 0 20px;
    }
    ul.contact li.phone {
    	background: url(images/phone.png) no-repeat 0 2px;
    }
    ul.contact li.email {
    	background: url(images/email.png) no-repeat 54px 3px;
    }
    ul.contact li a {
    	margin-left: 60px;
    	color:#F5FC02;
    	text-decoration:none;
    }
    
    #logo {
    	float:left;
    	margin: 5px 0 0 7px;
    }
    
    ul.menu {
    	float: right;
    	margin: 25px 35px 0 0;
    }
    ul.menu li {
    	display: block;
    	margin: 0 0 0 10px;
    	list-style: none;
    	float: left;
    	font-size:18px;
    	color: #343434;
    	
    }
    ul.menu a {
    	display: block;
    	color: #fff;
    	letter-spacing: 1px;
    	text-decoration: none;
    	padding: 10px 20px;
    }
    /*ul.menu a:link, ul.menu a:visited {
    	color: #fff;
    	text-decoration: none;
    	letter-spacing: 1px;
    }
    ul.menu a:hover, ul.menu a:active {
    	color: #fff;
    	text-decoration: none;
    	letter-spacing: 1px;
    }*/
    ul.menu li.home a:hover, ul.menu li.home a:active {
    	background: url(images/splatter.png) no-repeat 11px -7px;
    	text-shadow: 2px 2px #000;
    }
    ul.menu li.serv a:hover, ul.menu li.serv a:active {
    	background: url(images/splatter.png) no-repeat -150px -7px;
    	text-shadow: 2px 2px #000;
    }
    ul.menu li.work a:hover, ul.menu li.work a:active {
    	background: url(images/splatter.png) no-repeat -315px -7px;
    	text-shadow: 2px 2px #000;
    }
    ul.menu li.esti a:hover, ul.menu li.esti a:active {
    	background: url(images/splatter.png) no-repeat -512px -7px;
    	text-shadow: 2px 2px #000;
    }
    ul.menu li.cont a:hover, ul.menu li.cont a:active {
    	background: url(images/splatter.png) no-repeat -700px -7px;
    	text-shadow: 2px 2px #000;
    }
    ul.menu li.home a.active {
    	background: url(images/splatter.png) no-repeat 11px -7px;
    	cursor: default;
    	text-shadow: 2px 2px #000;
    }
    ul.menu li.serv a.active {
    	background: url(images/splatter.png) no-repeat -150px -7px;
    	cursor: default;
    	text-shadow: 2px 2px #000;
    }
    ul.menu li.work a.active {
    	background: url(images/splatter.png) no-repeat -315px -7px;
    	cursor: default;
    	text-shadow: 2px 2px #000;
    }
    ul.menu li.esti a.active {
    	background: url(images/splatter.png) no-repeat -512px -7px;
    	cursor: default;
    	text-shadow: 2px 2px #000;
    }
    ul.menu li.cont a.active {
    	background: url(images/splatter.png) no-repeat -700px -7px;
    	cursor: default;
    	text-shadow: 2px 2px #000;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,305
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Added you css to the html and WHAT HAPPENED. Oh, found out your used #F5FC02; a so light yellow it disappeared. Changed it to black but still not getting menu. Quit.
    Are you using a doctype? Like:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset= "utf-8">
    <title>My Website</title>
    <style type="text/css">

    And what old versions of IE? Forget IE7 and older, waste of time.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Jul 2014
    Location
    Athens, Greece
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What versions of IE got problem???
    I checked your site, but all the pages are blank! Just a black header with the menu!

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    361
    Thanks
    9
    Thanked 53 Times in 52 Posts
    #head doesn't hold width, whenever browser's width got shrinked. Is that it?
    Try to add a rule for #head, based on fixed-width of #head_contain, as follows (in red):
    Code:
    #head {
    	height: 115px;
    	background: url(images/head_back.jpg) repeat-x 0 0;
    	min-width: 1010px;
    }
    #head_contain {
    	margin: 0 auto;
    	width: 1010px;
    }

  • #5
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why div-tag is usually used for making layout.


  •  

    Tags for this Thread

    Posting Permissions

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