|
CSS - Class Sometimes Inherits, Sometimes Doesn't?
I'm working on a site at http://www.andcuriouser.com/gallery . On the site, I have divs that are wrapped in links. The problem is, sometimes the div inherits the class of the link instead of obeying the attributes given to the div's class.
The kicker is that this only happens some of the time. I've tested it on Firefox, Safari and IE6 and it seems like what class it choses to obey is random. Some of the divs have the proper class, some take on the link's class. This is driving me up the wall. Does anyone have any thoughts? You should be able to see this happening on http://www.andcuriouser.com/gallery/?cat=photos. Some of the text in the thumbnails randomly turns pink (a bad thing), and the affected text changes with a few refreshes. Similar TutorialsI'm using the following code to create a CSS button: <a href="equipment.shtml"><span class="menubutton">Rental</span></a> .menubutton { color: white; text-decoration: none; font-family: Helvetica, Verdana, sans-serif; font-size: small; background-color: #666666; width: 110px; height: 20px; border-bottom:2px white solid; float:left; padding-top:5px; } .menubutton:hover { background-color: #1B1B1B; border-bottom: 2px #2E844A solid; cursor: hand; } IE six doesn't use the hover seudo class for some reason. Any suggestions? Hi, Is there a good way to use css to make every element with a specified class name to have some hover attribute, for instance .class:hover would do something? For some reason it doesn't work for me unless I say div.class:hover or a.class:hover, etc. I have to specify an element. hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Exactly that question. I got this menu from a website. Code: <!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" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px;
text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat;
z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px
solid #fff;}
#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px
center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat
120px center; color:#ff0;}
#menu :hover ul :hover ul li,
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif)
no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul :hover ul li,
#menu :hover ul :hover ul :hover ul li a {background:#888;}
#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}
.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE
7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but
terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species
within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>
Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag. Code: #showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}
I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code. Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having... Using the following example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
Sorry for the lousy title, can't come up with better wording.... What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one. Thanks... I've just run my site through the W3C CSS validator and I'm getting an error telling me I need to validate my XML document? So, how do I validate my XML document, and where do I put the </link> tag it tells me I need? I fear this is just the start of my problems here's the validator link: http://jigsaw.w3.org/css-validator/...&usermedium=all I downloaded a free layout and started using it for my club's website. After finishing several pages, I uploaded it to the school's server. However, I realized that after publishing it, the layout does not look right. It is supposed to look like this (I had to insert spaces to get around no URL postings for newbs) https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/howitssupposedtolook.jpg Unfortunately, it looks like this https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/index.html As you can see, there are several layout issues. First, the background color inside the white border is not the lighter green color. Also, the border is missing on the right hand side. If anyone can shed some light on this issue, I would greatly appreciate it! In case you can't pull up the CSS document, it is https:// netfiles.uiuc. edu/ro/www/Collegiate4HClub/~26/FlexibleGreen.css (please note, i'm a noob).. What i have right now: ################ HTML: ################ <div id="aboutusimage"></div> ################ CSS: ################ #aboutusimage { width:400px; height:75px; background-image:url(/images/about.jpg); position:relative; left:189px; top: 4px; margin-bottom:30px; } ======================== What i'd like to have: ################ HTML: ################ <div id="banner" class="about"></div> ################ CSS: ################ #banner { width:400px; height:75px; position:relative; left:189px; top: 4px; margin-bottom:30px; } #banner.about { background-image:url(/images/about.jpg); } ====================== For some reason, the image disapears when i do this :\ Any advice? Once again my developement is stalled with the interactions of my website with the multitude of browsers... Firebird... displays perfectly everytime without a doubt... I'm beginning to wonder why I even bother looking testing it in that browser becuase nothing is ever wrong. Internet Explorer, on the other hand, is a different beast entirely. Basically I'm trying to set up a div element that uses a semi opaque background... something between 75-85%, such that the background of my website shows through. So what I decided to do was make a graphic ( in Interlaced PNG format ) that would match my needs. As mentioned above there are some display issues in IE. I was wondering if there is a way to control the alpha level of element backgrounds without setting up/or using graphics, ( the less bandwidth the better ). Regards, I have a table. It's a nice table, presenting its data in a clean, semantic manner. Great, so I wanted it to be a pretty table too. And I did that (problematic lines commented out for comparison): Table with some CSS (Link no longer active). Then I thought about function again. I wanted a scrolling table (Note that this was never meant to work in the obsolete IE). I added "height: 100px; overflow: auto;" to the tbody's CSS. That's when I ran into problems: Table with only two lines of CSS added (Link no longer active). Problems: There is a horizontal scrollbar. It appears to be making up for the space that the vertical scrollbar takes up. My nice cell borders are no longer in the tbody, but instead stick out of the table, overlapping anything that comes after. Interestingly enough, although the height declaration is required in order to show scrollbars, if I only add the overflow style, I still get that nasty border chaos. I am using Firefox. Any ideas on how to fix/overcome/avoid these problems? This is really bugging me. http://www.invalidheart.org/carrie/ it doesn't work in anything but my resolution... can anyone help me fix this? I've had a huge hard time with this layout making it fit right, i tried using all css and i couldn't get it to fit. any suggestions? Hi everyone...new here and I hope you can help! Thanks is advance! I want to repeat an image (bkgd.jpg) in my background and it doesn't seem to be working. Here is the site: romanceplaybook I can't post the entire URL because I'm a new registrant. But just put dot com at the end. Not that the page background is white. It should be repeating the image bkgd.jpg Here is the CSS: body { background: #ffffff url(images/bkgd.jpg) top repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px auto 0px; padding: 0px; } #wrap { background: #ffffff url(images/bg.jpg) top center repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px 300px 0px; padding: 0px; } /************************************************ * Hyperlinks * ************************************************/ a, a:visited{ color: #507AA5; text-decoration: none; } a:hover{ text-decoration: underline; } /************************************************ * Header * ************************************************/ #header { background: #FFFFFF; width: 1000px; margin: 0px auto 0px; padding: 0px 0px 0px 0px; text-align: center; text-transform: uppercase; } #header a { font-family: Times New Roman, Helvetica, Sans-Serif; font-size: 48px; color: #333333; text-decoration: none; padding: 0px 10px 0px 10px; margin: 0px; text-transform: uppercase; } #header a:hover{ color: #333333; } /************************************************ * Navbar * ************************************************/ /************************************************ * Left Sidebar * ************************************************/ #l_sidebar { float: left; width: 160px; margin: 0px 20px 0px 0px; padding: 20px 0px 20px 0px; } #l_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #l_sidebar li { list-style: none; margin: 0px; padding: 0px; } #l_sidebar ul li { margin: 0px; padding: 5px 0px 0px 0px; } #l_sidebar ul li a { color: #507AA5; text-decoration: none; } #l_sidebar ul li a:hover { color: #507AA5; text-decoration: underline; } /************************************************ * Right Sidebar * ************************************************/ #r_sidebar { float: right; width: 160px; margin: 0px 0px 0px 0px; padding: 20px 0px 0px 0px; } #r_sidebar p{ padding: 2px 0px 16px 0px; margin: 0px; line-height: 20px; } #r_sidebar ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #r_sidebar ul li { margin: 0px; padding: 5px 0px 0px 0px; } #r_sidebar ul li a { color: #507AA5; text-decoration: none; } #r_sidebar ul li a:hover { color: #507AA5; text-decoration: underline; } /************************************************ * Content * ************************************************/ #content { width: 950px; margin: 0px auto 0px; padding: 0px; } #content p{ padding: 0px 0px 15px 0px; margin: 0px; line-height: 20px; } #content p img{ float: left; border: none; margin-right: 15px; margin-bottom: 10px; } #content h1 { color: #333333; font-size: 22px; font-family: Times New Roman, Verdana, Arial, Sans-Serif; font-weight: normal; padding: 0px 0px 0px 0px; margin: 0px; } #content h1 a { color: #333333; text-decoration: none; } #content h1 a:hover { color: #658DB5; text-decoration: none; } #content h2 { color: #333333; font-size: 14px; font-family: Times New Roman, Verdana, Arial, Sans-Serif; font-weight: bold; padding: 5px 0px 5px 0px; margin: 0px; border-top: 1px dotted #C0C0C0; border-bottom: 1px dotted #C0C0C0; } #content p ol{ margin: 0px; padding: 0px 0px 0px 20px; } #content p ul{ margin: 0px; padding: 0px 0px 0px 20px; } blockquote{ margin: 0px 0px 0px 25px; padding: 0px 25px 0px 10px; font-style: italic; color: #666666; border-left: 3px solid #B3C8DB; } #content blockquote p{ margin: 0px 0px 20px 0px; padding: 0px; } #contentmiddle { float: left; width: 550px; margin: 0px 0px 0px 0px; padding: 20px 5px 10px 20px; text-align: left; } #contentmiddle p img{ float: left; border: none; margin-right: 15px; margin-bottom: 10px; } .contentdate { background: #FFFFFF url(images/date.gif); float: left; width: 45px; height: 50px; margin: 0px; padding: 0px; } .contentdate h3 { color: #FFFFFF; font-size: 10px; font-weight: normal; padding: 1px 0px 0px 10px; margin: 0px; text-transform: uppercase; } .contentdate h4 { font-family: Times New Roman, Helvetica, Sans-Serif; color: #999999; font-size: 21px; font-weight: bold; padding: 5px 4px 0px 0px; margin: 0px; text-align: center; } .contenttitle { float: left; width: 480px; margin: 0px; padding: 0px 0px 0px 10px; } #contentmiddle ul { list-style: none; margin: 0px; padding: 0px 0px 20px 0px; } #contentmiddle ul li { margin: 0px; padding: 5px 0px 0px 0px; } #contentmiddle ul li a { color: #507AA5; text-decoration: none; } #contentmiddle ul li a:hover { color: #507AA5; text-decoration: underline; } #content img.wp-smiley { float: none; border: none; padding: 0px; margin: 0px; } #content img.wp-wink { float: none; border: none; padding: 0px; margin: 0px; } .postspace { background: #EFEFEF url(images/spacer.gif); width: 440px; height: 32px; margin: 0px; padding: 0px; } /************************************************ * Footer * ************************************************/ #footer { background: #FFFFFF; width: 952px; margin: 0px auto 0px; padding: 10px 0px 10px 0px; text-align: center; border-top: 1px solid #C0C0C0; } /************************************************ * Search Form * ************************************************/ #searchdiv { margin: 0px; padding 0px; } #searchform { margin: 0px; padding: 0px; overflow: hidden; } #s { width: 190px; background: #EFEFEF url(images/search.gif); color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; padding: 3px; margin: 8px 0px 0px 0px; border: 1px solid #C0C0C0; } /************************************************ * Comments * ************************************************/ #commentblock { width: 395px; background: #EFEFEF; color: #333333; float: left; padding: 10px 20px 0px 20px; margin: 10px 0px 10px 0px; border: 1px solid #C0C0C0; } ol#commentlist { padding: 5px 0px 5px 0px; margin: 0px; list-style-type: none; } .commentdate { font-size: 12px; padding-left: 0px; } #commentlist li p{ margin-bottom: 8px; line-height: 20px; padding: 0px; } .commentname { color: #333333; margin: 0px; padding: 5px 5px 5px 0px; } .commentinfo{ clear: both; } .commenttext { clear: both; margin: 5px 0px 20px 0px; padding: 20px 10px 5px 10px; width: 365px; background: #FFFFFF url(images/comment.gif) no-repeat top; } .commenttext-admin { clear: both; margin: 5px 0px 20px 0px; padding: 20px 10px 5px 10px; width: 365px; background: #FFFFFF url(images/comment.gif) no-repeat top; } #commentsformheader{ padding-left: 0px; } #commentsform{ text-align: left; margin: 0px; padding: 0px; } #commentsform form{ text-align: left; margin: 0px; } #commentsform p{ margin: 0px; } #commentsform form textarea{ width: 99%; } p.comments_link img{ margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } This is my CSS File: PHP Code: .linkbody { padding: 15px 15px 6px; color: white; font-family: Verdana; font-size: 10pt; width: 160px; background-color: #006EA1; } and this my html file: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<title> Schmid </title>
<link type="text/css" rel="stylesheet" href="css2.css">
</head>
<body>
<center>
<table class="linkbody" width="800">
<tr>
<td>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</td>
</tr>
</table>
</center>
</body>
</HTML>
In Firefox the padding works fine, but in the IE6 it doesn't work at all makes me angry thx for any help I can't get the css to show the top border http://www.****copz.com Code:
#navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #000;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #000;
border-bottom: none;
background: #FF5555;
text-decoration: none;
}
#navlist li a:link { color: #000; }
#navlist li a:visited {
color: #000;
background: #0033FF; }
#navlist li a:hover
{
color: #000;
background: #7575FF;
border-color: #227;
}
#navlist li a#current
{
background: white;
border-bottom: 1px solid white;
border-top: 1px solid #000;
}
a:link {
color: #000;
text-decoration: none;}
a:visited { color: #0033FF;
text-decoration: none; }
A:active{
color: #0000ff;
text-decoration: none;}
A:hover{
color: #FF0000;
text-decoration: none;
background-color: #ffffff;}
I'm wondering why does the padding doesn't work for the <p> tag... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
p.pFrontPageTitle
{
margin: 0px;
padding: 200px 0xp 200px 0px;
color: #000000;
font-weight: bold;
font-family: verdana;
font-size: 12pt;
font-style: normal;
background-color: #FF0000;
}
</style>
</head>
<body>
<p class="pFrontPageTitle">What Our Customers Say .....</p>
</body>
</html>
My site works fine with Opera 7 but refuses to work properly with IE6 and Firefox. There's definately a problem with how each browser renders my CSS. I for one cannot figure out what to change so that the site would work with all three browsers. That being said, would anyone be grateful enough to help me out? Thanks! URL: URL I've included some screenshots of how the site looks like on all three browsers. URL URL URL I built an image gallery with a 1px border and 5px padding around the thumbnails. Looks fine in Safari and IE5 for the Mac. But IE 6 ignores the padding completely. <img src="'.$thumb_path.$row->thumb.'" style="margin-bottom:5px;padding:5px;border:1px solid #cccccc;" > Any ideas are appeciated !! |
|||||||