473,386 Members | 1,654 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Text padding

30
I am making a layout and the content box is acting weird. The text is going outside the box even though I have the padding set. The margin is zero. Hear is what it looks like... Link

Hear is some of my code.


#content {

height: 518px;
width: 505px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
line height: .8em;
padding-left: 38px;
padding-right: 38px;
padding-top: 46px;
padding-bottom: 46px;
margin-top: 20px;
margin-bottom: 20px;


}


<div id="content">
<h2>Home</h2>
<p id="home">
Blallasd;ldsjf;lasjdf;laskjdf;lasjkdfla;jksdf;lask jdf;lajsdl;fjasdlfjkasdl;kfjas;ldjfk;lsadjflasdjfa
asdlkjfa;lsdkjf;laksdjf;lajsdlkfjafds

</p>

</div>
Jul 2 '07 #1
8 5463
drhowarddrfine
7,435 Expert 4TB
That link won't work.
The markup seems to work fine, though.
Jul 2 '07 #2
Bouzy
30
One minute............................................ ..................................
Jul 2 '07 #3
Bouzy
30
http://s93.photobucket.com/albums/l7...rrent=ggmf.jpg

Don't know why it worked... Hear is what its doing (I added the gray over the text because I don't want it read.
Jul 2 '07 #4
drhowarddrfine
7,435 Expert 4TB
Which browser? I don't see that at all. You may have to give a link or the complete code because there must be something else not in the code you show so far.
Jul 2 '07 #5
Bouzy
30
It does that for me in the latest versions of Firefox and IE. Hear is the full code (CSS and XHMTL)

body {

background-color: #5f656b;
font-family: Tahoma, "Arial Unicode MS", Arial, "sans-serif", serif;
font-size: 12px;
color: #eea103


}

#content {

height: 518px;
width: 505px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
padding-left: 38px;
padding-right: 38px;
padding-top: 46px;
padding-bottom: 46px;
margin-top: 20px;
margin-bottom: 20px;





}

#navigation {

margin: 0px;
padding-top: 0px;
border-width: 0px;


}

#banner {

border-width: 0px;
margin: 0px;
padding: 0px;


}


#container {

width: 712px;
margin: 0px auto;
margin-left: auto;
margin-right: auto;
}


************************************************** ******************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Goldfish Graphics</title>

<link type="text/css" rel="stylesheet" href="Goldfish.css" />

</head>
<body>

<div id="container">

<div id="banner">
<img src="images/banner.jpg" alt="Goldfish Graphics Banner Image" />
</div>

<div id="navigation">
<img src="images/navigation.jpg" alt=Navigation background image" />
</div>

<div id="content">
<h2>Home</h2>
<p id="home">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer tristique massa in enim. Fusce laoreet velit eget diam. Mauris a mi ut augue scelerisque rhoncus. Vivamus suscipit tortor eget lacus. Nullam aliquet tortor. Proin ac dolor in felis eleifend bibendum. Donec cursus tortor id risus tempus congue. Suspendisse sit amet libero. In hac habitasse platea dictumst. Morbi gravida augue at nisl. Ut et ligula. In pharetra, lectus eu dignissim vestibulum, pede dui egestas nunc, venenatis eleifend arcu eros nec massa.

Nam consectetuer, mauris ac sagittis eleifend, justo nulla eleifend diam, vel pretium eros metus sed diam. Aliquam erat volutpat. Mauris et felis molestie lacus volutpat dapibus. In ipsum magna, dictum non, tincidunt in, ultricies ut, massa. Maecenas arcu. Nunc semper condimentum libero. Suspendisse et metus eget justo sagittis facilisis. Nam tristique aliquet nulla. Vestibulum metus lacus, aliquet eget, pellentesque et, consectetuer eu, ipsum. Mauris nisi metus, lacinia quis, placerat et, dictum faucibus, velit. Sed tincidunt leo id tellus.


</p>

</div>


<h5>Testimonies</h5>
<p>
""
</p>

<p>
Links
</p>

</div>







</body>
</html>
Jul 3 '07 #6
drhowarddrfine
7,435 Expert 4TB
The only thing I can think it would be caused by is the images you are using. I'm still not getting the same problem you are.
Jul 3 '07 #7
Bouzy
30
I changed the Css to this and it looks better now, however if you see what could have caused it, let me know because I want to know what I did. Basically the only thing I changed was I gave the <p> its own Id and set the width so it fit in the content box. If thats not proper let me know also please...


body {

background-color: #5f656b;
font-family: Tahoma, "Arial Unicode MS", Arial, "sans-serif", serif;
font-size: 12px;
color: #eea103


}

#content {

height: 505px;
width: 518px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
padding-left: 38px;
padding-right: 38px;
padding-top: 46px;
padding-bottom: 46px;
margin-top: 20px;
margin-bottom: 20px;





}

#navigation {

margin: 0px;
padding-top: 0px;
border-width: 0px;


}

#banner {

border-width: 0px;
margin: 0px;
padding: 0px;


}


#container {

width: 712px;
margin: 0px auto;
margin-left: auto;
margin-right: auto;
}

#home {

width: 442px;

}

#news {

width: 442px;

}
Jul 3 '07 #8
nitinpatel1117
111 100+
#home {
width: 442px;
}

}
You were probably overriding the width earlier, either though the id
#home{
}

or through the element

p{
}
Jul 3 '07 #9

Sign in to post your reply or Sign up for a free account.

Similar topics

6
by: no0bodyhome | last post by:
One of the properties I have is: border-top-width: 30px I'd like to put some text on this border; align it and such. It is part of more complicated floating column text-box I'm working on...
4
by: anatushi | last post by:
Hi, im looking for help on how to add a text fader to my website, usually i'm working with css but in this case i need to add java script to make it work, that wasn't the problem but somehow it...
1
by: Basso | last post by:
Hello, I'd like to add a progressive number to upper-left corner on every TH element avoiding cell text reposition. // TH props table.quadroData th { text-align: center; background-color:...
4
by: sweep | last post by:
Hi there, I have a problem with some CSS I'm writing and I was looking for a little help. I have a nav bar at the top and left side of my page in CSS which work fine. The remaining space has a...
4
by: Shark | last post by:
Hi, I have the following code: <div id="navAlpha"><div id="mainImage"><img src="/All/10001/main.jpg"></div> <div id="mainInfo"> // a list apart's mountain top <dl id="red"><dt>nick:...
2
by: george.leithead | last post by:
Hi all, I have a very strange problem! In following Web page (which is generated from a CMS System), the navigation to the left 'dissapears' when you roll the mouse over the links? It does not...
18
by: Diogenes | last post by:
Hi All; I, like others, have been frustrated with designing forms that look and flow the same in both IE and Firefox. They simply did not scale the same. I have discovered, to my chagrin,...
1
by: jimchapuk | last post by:
I created a two column CSS layout by floating the columns left and right respectively. When I put text into the first column (via HTML) it continues in a straight line through the second column...
5
by: Thirunavukarasu | last post by:
hi! i'm using textarea to type the contents. inwhich i need to make the text as italic if i use the following code i'm not getting the italic text instead i'm getting the html tags...
1
by: littlealex | last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS! In IE6 the text for the following page doesn't display properly - rather than being...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.