CSS Problem

BenWall · May 3, 2007

I have got my site in dreamweaver, but when I put more text than the box can handle it spills over, doesnt look very good, pic below to show what I mean.

style.css is shown below also. What do I need to change? Thanks

Code:

body {
    font-family: Tahoma,arial,sans-serif;
    background: #666;
}
#container {
    margin-top: 50px;
    border: 5px solid black;
    background: #333;
    width: 600px;
    height: 500px;
}
#image {
    background:url("header.jpg");
    height: 177px;
    border-bottom: 5px solid black;
    text-align: left;
    padding-left: 50px;
}
#menu {
    float: left;
    font-family: Tahoma,arial,sans-serif;
    font-size: 8pt;
    border-right: 5px solid black;
    height: 320px;
}
#menu ul {    
    list-style: none;
    width: 150px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 1.1em;
}    

#menu li {
    font-size: 1.3em;
    text-align: left;
}

#menu li a {
    padding: 2px;
    font-weight: bold;
    display: block;
    padding-left: 4px;
    height: 15px;
    text-decoration: none;
    color: white;
    background:url("a.bmp");
    border-bottom: 1px solid black;
}    
    
#menu li a:hover {
    background: #666;
    color: black;
    background:url("ahover.bmp");
}
#main {
    padding: 5px;
    color: #ccc;
    text-align: justify;
    height: 295px;
    font-size: 0.8em;
}
#copyright {
    color: #eee;
    float: right;
    width: 435px;
    font-size: 0.8em;
}
#copyright a {
    color: #999;
    text-decoration: none;
}
#copyright a:hover {
    color: #666;
}
h1 {
    font-size: 2em;
}

172.com · May 3, 2007

Assuming 'Container' is the box in question whack 'overflow:auto;' in it. Or overflow:hidden; if you don't want the scrollbar.

cava83 · May 3, 2007

can u post the HTML too coz I need to see how you have done it in order to help you

Dazz · May 3, 2007

Problem is you have a fixed height of 500px on the container. In Firefox or IE7 this will generate the above problem. In IE6 it wont be a problem as height is treated as min-height and therefore will grow.

There are two solutions

1) remove the height

2) setup a seperate stylesheet for ff/ie7 and ie6.

If you want to do number 2 i'll talk you through it.

BenWall · May 3, 2007

Code:

<LINK REL=StyleSheet HREF="include/style.css" TYPE="text/css" MEDIA=screen>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
body {
    background-color: #999999;
}
body,td,th {
    color: #D4D0C8;
}
-->
</style>
<title>BW Online</title>
<
<body topmargin="0">
<center>
<div id="container">
<div id="image"><br>
<br>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Me </a></li>
<li><a href="index.html">Contact</a></li>
<li><a href="index.html">Pictures</a></li>
<li><a href="index.html">Videos</a></li>
<li><a href="index.html">Forum</a></li>
<li><a href="index.html">My Blog</a></li>
<li><a href="index.html">Links</a></li>
</ul>
</div>
<div id="main">
<h1>About</h1>
<h3>Me</h3>
<p>Carrying on from the home page, I am a student and I am studying at  Derby College doing ICT Support. I also have my own company which is  called <a href="http://www.inc-s.co.uk/index.html" class="style1">INC Solutions</a>. The company deals with freelance IT work. So as you can probably tell I will be going into the IT industry after college. </p>
<p><a href="http://bw-online.co.uk/blogger/" class="style1">Please see my blog.</a></p>
<h3>My Loves</h3>
<p>this</p>
<p>jkshd arrying on from the home page, I am a student and I am studying at  Derby College doing ICT Support. I also have my own company which is  called <a href="http://www.inc-s.co.uk/index.html" class="style1">INC Solutions</a>. The company deals with freelance IT work. So as you can probably tell I will be going into the IT industry after college. arrying on from the home page, I am a student and I am studying at  Derby College doing ICT Support. I also have my own company which is  called <a href="http://www.inc-s.co.uk/index.html" class="style1">INC Solutions</a>. The company deals with freelance IT work. So as you can probably tell I will be going into the IT industry after college. arrying on from the home page, I am a student and I am studying at  Derby College doing ICT Support. I also have my own company which is  called <a href="http://www.inc-s.co.uk/index.html" class="style1">INC Solutions</a>. The company deals with freelance IT work. So as you can probably tell I will be going into the IT industry after college. </p>
<p>arrying on from the home page, I am a student and I am studying at  Derby College doing ICT Support. I also have my own company which is  called <a href="http://www.inc-s.co.uk/index.html" class="style1">INC Solutions</a>. The company deals with freelance IT work. So as you can probably tell I will be going into the IT industry after college. </p>
<p>arrying on from the home page, I am a student and I am studying at  Derby College doing ICT Support. I also have my own company which is  called <a href="http://www.inc-s.co.uk/index.html" class="style1">INC Solutions</a>. The company deals with freelance IT work. So as you can probably tell I will be going into the IT industry after college. </p>
<p>arrying on from the home page, I am a student and I am studying at  Derby College doing ICT Support. I also have my own company which is  called <a href="http://www.inc-s.co.uk/index.html" class="style1">INC Solutions</a>. The company deals with freelance IT work. So as you can probably tell I will be going into the IT industry after college. </p>
<p>arrying on from the home page, I am a student and I am studying at  Derby College doing ICT Support. I also have my own company which is  called <a href="http://www.inc-s.co.uk/index.html" class="style1">INC Solutions</a>. The company deals with freelance IT work. So as you can probably tell I will be going into the IT industry after college.</p>
<p>arrying on from the home page, I am a student and I am studying at  Derby College doing ICT Support. I also have my own company which is  called <a href="http://www.inc-s.co.uk/index.html" class="style1">INC Solutions</a>. The company deals with freelance IT work. So as you can probably tell I will be going into the IT industry after college. </p>
<p>sd</p>
<p>&nbsp;</p>
<p>a</p>
<p>s</p>
<p>das</p>
<p>ds</p>
<p>a</p>
<p>asd</p>
<p>a</p>
<p>das</p>
</div>
<div id="copyright">
Copyright <a href="index.html">bw online </a> 2007</div>
</div>

Ignore the text.

Thanks 172.com, but its still looks shite. Will have to work on it abit more.

172.com · May 3, 2007

Ok, now I've seen the HTML, cut the code I gave you and put it into #main.

furry_cup · May 4, 2007

did you get it sorted?

Adams_16v · May 4, 2007

change the #main height to auto.

cava83 · May 4, 2007

looks like you have all the advice you need.

Css is a bit tricky specially through multiple browsers.

There are problems with percentages, min widths and so on. Your work should be designed to work in FF, and then correct it to also work in IE, sometimes it will view correctly in IE7 and not IE7 or the other way round, both or neither.

You have got the right idea, you must but everything in a container or wrapper so to speak and build everything within that.

CSS is excellent, but it is a bit tricky to get your head around.

Good work though

furry_cup · May 4, 2007

got a link to the site?

BenWall · May 4, 2007

I changed the design above to this www.bw-online.co.uk

cava83 · May 4, 2007

you need to align your contact form.

Is that a pre-made template?

BenWall · May 4, 2007

gabi_cavaller said:
you need to align your contact form.

Is that a pre-made template?

Yup. How do I align it?

furry_cup · May 4, 2007

i know all about contact forms.. tehe

chapers · May 4, 2007

furry_cup - still doing the graphic work then!?

furry_cup · May 4, 2007

hey mate, havent spoke to you for a while!

yeah still doing it, still learning.. still sit on here all day!

chapers · May 4, 2007

How's it going mate!?

Been to anymore meets? Looking to go to the Ring in the next month or so, you been before?

BenWall · May 4, 2007

chapers said:
How's it going mate!?

Been to anymore meets? Looking to go to the Ring in the next month or so, you been before?

Nice thread highjack there.

furry_cup · May 4, 2007

lol dont worry, i pm'd chapers back!

back to your contact form.

see this for some ideas.

http://www.dynamicdrive.com/style/csslibrary/category/C6/

chapers · May 4, 2007

My bad

Search

Search

CSS Problem

BenWall

172.com

cava83

Dazz

BenWall

172.com

furry_cup

Adams_16v

cava83

furry_cup

BenWall

cava83

BenWall

furry_cup

chapers

furry_cup

chapers

BenWall

furry_cup

chapers

Similar threads