Hello,
On my site i use div and a css file
A part of my css file looks like this :
div.content {
background-color:#FCF2E6;
border:dashed 3px #8D9719;
margin:0 227px 30px 14em;
padding:0px 20px 10px;
}
div.test {
background-color:#FCF2E6;
border:dashed 3px #8D9719;
margin:0 227px 30px 14em;
padding:0px 20px 10px;
}
When i do a :
<div class="content">
Everything looks allright.
But when i do a :
<div class="test">
Everything doesn't look good.
What must i do to make it both allright.
Roelof
<div> Css question
Do your html and css validate ?
Did you redefine .test ? as an id ?
Which browser ?
Maybe you could provide a link.
<div> Css question
I'd love to be of assistance, but my crystal ball is in the repair shop. [/sarcasm]
<div> Css question
Do your html and css validate ?
Yes, they do
Did you redefine .test ? as an id ?
Can you explain what you mean with that
Which browser ? IE 6.0
Maybe you could provide a link.
Look at http://msk.knoal.nl
en then link uitslagen at Heren.
Roelof
<div> Css question
Um, what's the problem again?
Also, remove this:
<?xml version="1.0" encoding="windows-1252"?>
it throws IE into Quirks Mode.
THe page isn't valid HTML
http://validator.w3.org/check?verbose=1&uri=http%3A//msk.knoal.nl/index.php/%3Fs%3Dvoorpagina
(sorry, I'm picky )
And why are you using a frame?
<div> Css question
I use a frame so visitors don't see the whole url.
I will enclose the whole page and the whole css file because i use a blog.
<?xml version="1.0" encoding="windows-1252"?>
<!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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="<aanroep css file>" type="text/css" />
<title><titel van de site></title>
<!--[IF IE]>
<style type="text/css">
div.menu ul.sub li a {
width:100%;
}
</style>
<![endif]-->
</head>
<body>
<div class="header">
<h1>
MSK Basketball
</h1>
<small>De gezelligste club van het Noorden</small>
<hr />
</div>
<div class="menu">
<h2>
Navigation
</h2>
<ul>
<li>
<a href="/index.php/?s=voorpagina">Home</a>
<ul class="sub">
<li>
<a href="/index.php/?s=contributie">Contributie</a>
</li>
<li>
<a href="/index.php/?s=bestuur">Bestuur</a>
</li>
</ul>
</li>
<li>
<a href="/index.php/?s=heren">Heren 1</a>
<ul class="sub">
<li>
<a href="/index.php/?s=uitslagh">Uitslagen</a>
</li>
<li>
<a href="/index.php/?s=standh">Standen</a>
</li>
</ul>
</li>
<li>
<a href="/index.php/?s=aspiranten">Aspiranten</a>
<ul class="sub">
<li>
<a href="/index.php/?s=uitslagena">Uitslagen</a>
</li>
<li>
<a href="/index.php/?s=standena">Standen</a>
</li>
</ul>
</li>
<li>
<a href="index.php/?s=programma">Programma</a>
</li>
</ul>
<div>
If you want, you can also put one or more notes here - if you don't need it, it is
easy to remove.
</div>
<hr />
</div>
<hr />
<div class="content">
Content
</div>
<hr />
<div class="footer">
<address>
<em>Kiwicolors</em>, created by <a
href="mailto:floele[-a-t-]gmail dot com">Florian Schmitz</a> 2005
</address>
</div>
</body>
</html>
CSS file :
body {
background-color:#F8F7C4;
font:0.8em Verdana, sans-serif;
margin:0;
padding:0;
color:#1B0C0D;
}
div.content {
background-color:#FCF2E6;
border:dashed 3px #8D9719;
margin:0 227px 30px 14em;
padding:0px 20px 10px;
}
div.test {
background-color:#FCF2E6;
border:dashed 3px #8D9719;
margin:0 227px 30px 14em;
padding:0px 20px 10px;
}
div.menu {
padding-top:20px;
float:left;
color:#FCF2E6;
width:12.5em;
}
div.menu div {
margin:20px 10px 0 10px;
padding:5px;
background-color:#FCF2E6;
border:dashed 3px #8D9719;
color:#1B0C0D;
}
div.menu ul {
margin:0;
padding:0;
list-style:none;
}
div.menu ul li {
border-bottom:solid 1px #FCF2E6;
}
div.menu ul.sub {
border-bottom:solid 7px #505D00;}
div.menu ul.sub li {
text-indent:10px;
border:0;
width:100%;
}
div.menu ul li a {
display:block;
background-color:#505D00;
padding:5px 12px;
font-weight:bold;
border-left:solid 7px #505D00;
text-decoration:none;
color:#FCF2E6;
}
div.menu ul.sub li a {
border-left:solid 7px #505D00;
background-color:#85900E;
padding-left:10px;
}
div.menu ul a:hover,div.menu ul a:active {
background-color:#979F46;
border-left-color:#5D3E1B;
}
div.menu ul.sub a:hover,ul.sub a:active {
background-color:#795B4E;
border-left-color:#5D3E1B;
}
div.menu span.youarehere {
position:absolute;
left:3px;
}
div.menu h2 {
border:dashed 0.09em #DAD79B;
border-left:0;
margin:0 30px 20px 0;
padding:3px;
font-size:110%;
background-color:#505D00;
}
div.header {
padding:0 0 20px 200px;
background:url(../images/17.jpg) no-repeat #EBF08C;
margin-bottom:15px;
border-bottom:solid 2px #505D00;
}
div.header h1 {
font-size:230%;
margin:0 0 5px;
padding-top:25px;
}
div.header small {
padding-left:20px;
color:#5B3D2F;
font-size:110%;
font-weight:bold;
}
div.rightcol {
background-color:#FCF2E6;
border:dashed 3px #8D9719;
padding:0 8px 7px;
float:right;
margin:0 10px 15px;
width:180px;
}
div.footer {
clear:both;
text-align:center;
padding:3px 0;
background-color:#DAD79B;
}
div.varlinks {
position:absolute;
top:2px;right:5px;
}
address {
font-style:normal;
}
dt {font-weight:bold;}
hr {
display:none;
}
div.content hr {
display:block;
}
code {
font-size:1.2em;
padding:2px 10px;
display:block;
border: dotted 1px #1B0C0D;
}
<div> Css question
Um, I still can't see what the problem is.
Also, you NEED to remove the XML prolog.
<div> Css question
I did some testing with
<hr> <div class="content">Content</div> <hr> <div class="test">Content</div> <hr>
I can't see any problem with Mozilla or MSIE 6.
Maybe you should clear your browser cache (ctrl F5)
<div> Css question
wierd,
And when you do a div="content" and another time div=""test".
I found another wierd problem which occurs about the same time.
When i look at the site on my computer, it looks like this :
This is not good. The letters are to big.
But when i look at my wife's computer , it looks like this.
And this is how the site must look like.
We both use MSIE6. Only i use a XP machine and my wife use a Win98 machine
Is very wierd. If I use Firefox everything is perfect.
Who can solve this mistery ??
Roelof
<div> Css question
You've probably got your font settings different to hers.
Go to view>text size> and see if they are the same.
<div> Css question
oke, that did the trick about the letters.
Now the problem of the different div's
What i want is that rightcol disappear and that div.content will be bigger.
Who can give me a tip ??
Roelof