...

View Full Version : Cross Browser CSS Problem



Jesuspwnt
01-07-2008, 07:52 PM
Hey, I have a website im developing for a client, yet the CSS I am using to create a rounded div doesn't stretch like it does in firefox, can you help me out?

Home.php:


<div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
<div class="fixer">&nbsp;
</div>
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

style.css:

body{
background-color: #959492;
font-face: veranda;
font-family: verdana;
}
.container {
background: #79d867;
color: #736f6e;
width: 75%;
overflow: auto;
text-align: center;
font-face: veranda;
font-family: verdana;
}
.rtop, .rbottom{
display:block;
background: #959492;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background: #79d867;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
.fixer{
width: 75%;
height: 97%;
}
.content{
top: 27%;
left: 25%;
width: 55%;
height: 57%;
position: absolute;
overflow: auto;
font-face: veranda;
font-family: verdana;
color: #736f6e;
}

Excavator
01-07-2008, 08:11 PM
<!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>
<meta name="" content="authored by http://nopeople.com/Design" />
<style type="text/css">
body{
background-color: #959492;
font-face: veranda;
font-family: verdana;
}
.container {
background: #79d867;
color: #736f6e;
width: 75%;
overflow: auto;
text-align: center;
font-face: veranda;
font-family: verdana;
}
.rtop, .rbottom{
display:block;
background: #959492;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background: #79d867;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
.content{
height: 97%;
}

</style>
</head>
<body><div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end .content--></div>
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>
</body>
</html>


That works in IE6, IE7 and FF2... I'm still studying it to see what makes the corners.

Jesuspwnt
01-07-2008, 08:25 PM
ahh.
you see it WORKS.
but not the way i want it to work, i wish to make the container (hence .fixer) always be a specific size not Dependent on the amount of content in container.

Do you understand what i am trying to achieve?

Excavator
01-08-2008, 01:08 AM
Not sure, ...what happens when you just put

.content{
height: 200px;
}

Jesuspwnt
01-08-2008, 03:10 AM
WTF!??!?! i want it to stay the same height..... as in firefox.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum