PDA

View Full Version : Removing automatically added CSS div shadow



T4_
Jul 21st, 2009, 05:03 AM
My main div receives an automatic shadow at the bottom (however, the other divs don't). I've gone over the CSS but I can't see anything different enough to result in a shadow being added.

Sometimes, when I load a page, it's gone (but returns when I refresh, or go to another page).

This is the website:
http://www.indigetesdii.org/index.php

And this is the relevant CSS:


#main {

width: 50%;

height: 73%;

position: absolute;

top: 13%;

left: 25%;

margin: 0;

padding: 0;

border: 1px dotted;

border-color: #000000;

text-align: left;

overflow: auto;

}



#menu {

width: 50%;

height: 10%;

position: absolute;

top: 89%;

left: 25%;

padding: 0;

border: 1px dotted;

border-color: #000000;

text-align: center;

}



Here's the full CSS, just in case there's something in there which may cause conflicts (can't find anything myself, though):

<style type="text/css">



html, body {

margin: 0;

padding: 0;

height: 100%;



font-family: verdana, arial, helvetica, sans-serif;

font-size: 11px;

color: #000000;

}



a:link {

text-decoration: none;

color: #000000;

}

a:visited {

text-decoration: none;

color: #000000;

}

a:hover {

text-decoration: none;

color: #000000;

background: #666666;

}
a:active {

text-decoration: none;

color: #000000;

}



#header {

width: 50%;

height: 10%;

position: absolute;

top: 1%;

left: 25%;

margin: 0;

padding: 0;

border: 1px dotted;

border-color: #000000;

text-align: center;

}



#main {

width: 50%;

height: 73%;

position: absolute;

top: 13%;

left: 25%;

margin: 0;

padding: 0;

border: 1px dotted;

border-color: #000000;

text-align: left;

overflow: auto;

}



#menu {

width: 50%;

height: 10%;

position: absolute;

top: 89%;

left: 25%;

padding: 0;

border: 1px dotted;

border-color: #000000;

text-align: center;

}



#bg1 {

position: absolute;

left: 0;

bottom: 0;

width: 236px;

height: 360px;

background: url(img/bg1.jpg);

}



#bg2 {

position: absolute;

right: 0;

bottom: 0;

width: 236px;

height: 360px;

background: url(img/bg2.jpg);

}



p.home {

margin-top: 10%;

margin-left: 25px;

line-height: 2em;

}



p.main {

margin-top: 15px;

margin-left: 15px;

margin-right: 10px;

}



p.menu-top {

margin-top: 2%;

}



p.menu-bottom {

margin-bottom: 2%;

}



p.media {

margin-top: 15px;

}


table.media {
margin-left: 14px;
}

td.media {
font-family: verdana, arial, helvetica, sans-serif;

font-size: 10px;

color: #000000;
}


</style>


This happens in Iceweasel (Firefox, basically) and Epiphany. I can't remember if it also comes up in Internet Explorer (I don't have access to a Windows box at the moment).

Any help would be greatly appreciated!


[edited to add:]
Not sure what happened in the code fields... normally there isn't any spacing between the lines in the {} sections in my CSS.

abduraooft
Jul 21st, 2009, 09:46 AM
Which is your browser? I don't see any such shadow in FF2.

T4_
Jul 21st, 2009, 11:04 PM
Which is your browser? I don't see any such shadow in FF2.The browser is Iceweasel 3.06. It's the same as Firefox bar some small alterations made by the Debian developers.

Right, I've just asked my girlfriend (she wasn't awake when I started wondering about the shadow... lazy! ;)) to check on her "real" Firefox: the shadow's not there.

So on Debian I get it in Iceweasel and Epiphany (both Gecko-based), on Ubuntu I got it in Firefox, but she doesn't get it in her Ubuntu's Firefox.

Pfff... I'll try to view the site on more machines; at work they've got XP where I can test with Firefox and Internet Explorer; and I've got one gNewSense box which would be good for IceCat and an extra Epiphany test.

I don't get how different GNU+Linux distributions/hardware can render CSS differently, though. :/

But if the shadow's just with me, or in rare cases of modified browser/distros, then meh - if 99% of visitors won't see it, I can live with that :)