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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Location
    South-West, England.
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Issue with text while building site.

    Hello there,

    I am new to the forums so I used the [ code ] to show the codes.
    This is my first post.

    I have had some issues with the website I am building for a takeaway. I have positioned every single object and text correctly.

    I have had a couple of problems with the text display on the Internet Explorer 9. The website displays correctly on Mozilla Firefox and Google Chrome, but not on IE9.

    This is how it the site looks on IE:



    This is how it looks on chrome, how it is ment to look like.



    The HTML Codes I have used:
    Code:
    <div id="services">
    	<div id="services-title">
    		SERVICES
    	</div>
    	
    	<div id="services-text">
    		<p>We make food daily fresh throughout the day. our service is very fast which gives more pleasure to you in eating. We often estimate 40 minutes of home delivery, however we deliver earlier than expected. </p>
    		<p>Our delivery boxes are specially designed to keep your meal warm and fresh until it is delivered to your address.</p>
    	</div>
    </div>
    The CSS:
    Code:
    #services {
    background-image:url('../images/service-bg.jpg');
    background-repeat:no-repeat;
    height:201px;
    width:221px;
    margin-left:284px;
    margin-top:-1px;
    }
    
    #services-title {
    color: #ffffff;
    font-family:arial;
    font-weight:bold;
    padding-top:11px;
    padding-left:50px;
    }
    
    #services-text {
    color: #8b7641;
    font-family:Tahoma;
    font-size:10px;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    overflow: hidden;
    display:inline-block;
    }
    If anyone can help me with this. I'd be more than happy.

    Thank You.

    Samih.
    Last edited by samih96; 01-19-2012 at 10:25 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello samih96,
    The snippet of code you posted does not recreate your issue. A link to the test site is probably the best way to for us to get a look at what's happening.

    On a related issue, you don't need to wrap every little thing in it's own div. See divitis here. HTML and CSS has lot's of ways to style text without adding div elements. Look at this approach -
    Code:
    <!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">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 0 0 300px;
    	background: #999;
    	overflow: auto;
    }
    #services {
    	height: 201px;
    	width: 221px;
    	margin: 0 0 0 284px;
    	padding: 0 10px;
    	background: #ccc url('../images/service-bg.jpg') no-repeat;
    	font: 10px Tahoma, Geneva, sans-serif;
    	color: #8b7641;
    }
    h1 {
    	color: #ffffff;
    	font-family: arial;
    	font-weight: bold;
    	padding-top: 11px;
    	padding-left: 50px;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="services">
                <h1>SERVICES</h1>
                    <p>
                        We make food daily fresh throughout the day. our service is very fast which gives more pleasure to you 
                        in eating. We often estimate 40 minutes of home delivery, however we deliver earlier than expected. 
                    </p>
                    <p>Our delivery boxes are specially designed to keep your meal warm and fresh until it is delivered to your address.</p>
            </div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Location
    South-West, England.
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    here is the test site which isn't finished yet.
    http://dl.dropbox.com/u/55534911/cod...ums/index.html

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Your use of all those extra elements and the huge negative margins are not helping you at all. Instead of the big -margins, try using floats to put elements beside each other.

    Your site could be a very simple 2 column layout like this.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Location
    South-West, England.
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Your use of all those extra elements and the huge negative margins are not helping you at all. Instead of the big -margins, try using floats to put elements beside each other.

    Your site could be a very simple 2 column layout like this.
    Firstly, There should be no problem in the codes I am using. I am using them in correct order and am using correct elements. Using the negative margins might not help me but it seems to work very fine on Mozilla Firefox and Chrome. Maybe trying margin-bottom: 5px; would help but that is my choice.

    I know a specialist and he checked my codes. He hasn't said anything about my negative margins.

    I think i have it figured.

    Thanks for trying to help

    -REQUEST LOCK

    Samih.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by samih96 View Post
    Firstly, There should be no problem in the codes I am using. I am using them in correct order and am using correct elements. Using the negative margins might not help me but it seems to work very fine on Mozilla Firefox and Chrome. Maybe trying margin-bottom: 5px; would help but that is my choice.

    I know a specialist and he checked my codes. He hasn't said anything about my negative margins.

    I think i have it figured.

    Thanks for trying to help

    -REQUEST LOCK

    Samih.
    Haha! It's a good thing you know a specialist
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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