...

View Full Version : Resolved Issue with text while building site.



samih96
01-19-2012, 05:17 PM
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:

http://dl.dropbox.com/u/55534911/issue2.jpg

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

http://dl.dropbox.com/u/55534911/how%20it%20should%20look.jpg

The HTML Codes I have used:

<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:

#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.

Excavator
01-19-2012, 05:58 PM
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 (http://www.apaddedcell.com/div-itis). HTML and CSS has lot's of ways to style text without adding div elements. Look at this approach -

<!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>

samih96
01-19-2012, 06:56 PM
here is the test site which isn't finished yet.
http://dl.dropbox.com/u/55534911/codingforums/index.html

Excavator
01-19-2012, 07:13 PM
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 (http://css.maxdesign.com.au/floatutorial/) to put elements beside each other.

Your site could be a very simple 2 column layout like this (http://nopeople.com/CSS%20tips/simple_2-column/index.html).

samih96
01-19-2012, 09:24 PM
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 (http://css.maxdesign.com.au/floatutorial/) to put elements beside each other.

Your site could be a very simple 2 column layout like this (http://nopeople.com/CSS%20tips/simple_2-column/index.html).

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.

Excavator
01-19-2012, 09:43 PM
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 :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum