|
CSS - Img Doesn't Appear When I Change Css That Doesn't Apply To Them?
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... Similar TutorialsHere's the code (it's all in the one file). (I had a link but I'm too new here) 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=ISO-8859-1"></meta>
<title> image border bug test</title>
</head>
<body onload="highlightimg()">
<div id="container">
<a class="aclass" ><img src="a.jpg" id="i1" alt="alttext"/></a>
<a class="aclass" ><img src="b.jpg" id="i2" alt="alttext"/></a>
<a class="aclass" ><img src="c.jpg" id="i3" alt="alttext"/></a>
</div>
<script type="text/javascript">
function highlightimg(){
document.getElementById('i2').setAttribute('style','border-width: 3px 3px 3px 3px; border-color:red;border-style: solid;');
}
</script>
</body>
</html>
Internet explorer refuses to apply the border style to the center (or either of the other) images. Any thoughts? (This is a small test case, the style must be applied with js in the actual application I'm building). This is messed up....it's not the javascript cause i deleted it and it still continued...it's not the includes cause i put everything on one file....it's not the <link> cause i put it in <style> tags and it still continued http://66.195.240.220/~majdkgf/cip/ it works PERFECT in Firefox...not in Internet Explorer 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, (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? 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 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. 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. Hi there, Sorry for being silly and pathetic and crap at CSS, but I'm having an issue with a site I've been working on. Site URL is here, and the issue that I am having is as follows: I have a layer with a cloud as it's background. It's the one in the centre, called layer1 because I didn't bother renaming it. Because of the background being a cloud, the edges are curved, like a fluffy cloud would be. Obviously any text in this layer will overrun the edges of the cloud, and so I thought it would make sense to use padding to trim the text area down so it would all fit on the cloud. Now the problem that I am having is that while padding the left side works, padding the right side appears to have no effect :-( If anyone's got any hints or tips that might solve my proble, I'd be reeeeally grateful! Regards, Lawrence Hey everyone, I am making a design for my own pleasure, and for some reason IE7 does not even show the menu. Here is my code. 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Untitled - Design 1</title>
<style type="text/css">
/* <![CDATA[ */
body {
background-color: #DDDDDD;
color: #000000;
text-align: center; /* IE5/Win hack, why do I bother with IE5/Win? */
font-family: verdana, tahoma, sans-serif;
font-size: 10pt;
margin: 0;
padding: 15px;
}
a img,a {
border: 0;
}
a,a:link {
color: #000000;
text-decoration: underline;
}
a:visited {
color: #000000;
text-decoration: underline;
}
a:hover {
color: #0096ff;
text-decoration: none;
}
#container {
margin: 0 auto;
width: 79%;
height: auto;
text-align: left;
}
#outer {
background-image: url( bg_top.gif );
background-repeat: no-repeat;
height: 86px;
padding: 15px;
}
#inner {
margin-top: -16px;
background-image: url(body_bg.gif);
background-repeat: repeat-y;
background-position: top left;
padding: 15px;
}
#leftmenu {
float: left;
width: 202px;
}
#leftmenu p {
border-left: 1px solid #0099cc;
border-right: 1px solid #0099cc;
text-align: center;
/* Blah, damn whitespaces */
margin-top: -15px;
margin-bottom: -5px;
}
#leftmenu h1 {
height: 35px;
background-image: url( header_top.gif );
background-repeat: no-repeat;
font-size: 15pt;
color: #FFFFFF;
}
#menulast {
background-image: url( menu_bottom.gif );
background-repeat: no-repeat;
background-position: top left;
height: 18px;
width: 202px;
}
.cleareasy {
clear: both; /* Good bye gullotine bug :) */
}
/* ]]> */
</style>
</head>
<body>
<div id="container">
<div id="outer">
asdfsdaf<br />
asdfsdaf<br />
asdfsdaf<br />
</div>
<div id="inner">
<div id="leftmenu">
<h1>asdfasdf</h1>
<p>
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
asdf<br />
</p>
<div id="menulast"></div>
</div>
<div class="cleareasy"></div>
</div>
</div>
</body>
</html>
And also IE5 shows spacings, which other browsers don't because of the negative margins I have said, anyway to do get rid of those? Hi guys Look here www DOT clickemarketing DOT com The date, before each article, should show at right. This date uses the .createdate css class, which is this Code:
.createdate {
color: #A9A9A9;
vertical-align: top;
padding-bottom:2px;
float: right;
font-size: 11px;
}
I don't know why IE shows it at left... FF shows ok Is there any way to correct this class, and make date show at right in this pseudo browser, worm collector, spyware downloader called IE ? Thanks Long time reader, first time poster. I have an issue with a css vertical menu I've made but first things first. My target browser is IE7, this is a corporate intranet so I have some control over this. However, we do run alot of pcs with Firefox but, of course, the problem doesn't exist with this browser. Here's the issue: The div#leftbox contains the menu but when the list elements extend into the center div (div#middlebox) you can see the anchors and finger them but if you try to move to the next list item the submenu disapears? It's like it recognizes the display: block on the list element but not on the anchor? Another weird thing is that if I extend the div#leftbox width to accommodate the size of the menu and the submenu it works fine but only if i have a background-color applied to the #leftbox. If I leave it transparent it behaves as before. Here's the markup and css... index.asp Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
<title>Intranet</title>
<link href="/styles/<%Response.Write(Session("session_theme"))%>/screen.css" type="text/css" media="screen" rel="stylesheet" />
<link href="/styles/print.css" type="text/css" media="print" rel="stylesheet" />
<style type="text/css">@import url(/styles/<%Response.Write(Session("session_theme"))%>/calendar-win2k-1.css);</style>
<script type="text/javascript" src="/calendar/calendar.js"></script>
<script type="text/javascript" src="/calendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="/calendar/calendar-setup.js"></script>
<link rel="SHORTCUT ICON" href="/favicon.ico" />
</head>
<body>
<div id="topbar">
<!--#include virtual="/inc/toolbar.asp" -->
</div>
<div id="leftbox">
<!--#include virtual="/inc/menu.asp" -->
</div>
<div id="rightbox">
<!--#include virtual="/inc/rightbox.asp" -->
</div>
<div id="middlebox">
<h1> Welcome to the IntraNET</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac pede. Cras tristique, ipsum in scelerisque lobortis, diam nisl lobortis ipsum, eu ultricies orci justo a purus. Integer pellentesque, dui ut ullamcorper pellentesque, diam sapien venenatis augue, id rutrum lorem nibh non ligula. Nullam mattis. Donec eget pede. Donec blandit rhoncus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis cursus augue. Maecenas elit. Nullam viverra justo sed mi. Cras porta tellus non justo. Fusce adipiscing molestie elit. Nullam vulputate felis sed mi. Curabitur velit sem, bibendum ut, tempus sed, sodales vitae, libero. Aliquam nisl. Pellentesque tellus dolor, elementum sed, semper suscipit, pretium vitae, mauris. Vivamus sem.
</p>
</div>
</body>
</html>
Here's the menu.asp include... Code: <ul id="nav"> <li><a href='/departments/reports/index.asp'>Reports</a> <ul> <li><a href=''>EOD<span>End of Day Reports</span></a></li> <li><a href=''>EOM<span>End of Month</span></a></li> <li><a href=''>On Demand Reports<span>Reports sent to the web queue</span></a></li> <li><a href=''>Office Reports<span>A collection of front office and customer service reports</span></a></li> <li><a href=''>Warehouse Reports<span>A collection reports for warehouse operations</span></a></li> <li><a href=''>Merchandising Reports<span>EIS and vendor reports for merchandising</span></a></li> <li><a href=''>Accounting Reports<span>A collection of account reports</span></a></li> </ul> </li> <li> <a href='/index.asp'>Home</a> </li> </ul> and here's the css Code:
body {background: #fff; font-size: 62.5%; color: #033; font-family: Verdana, Arial, san-serif;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
p { font-size: 1.2em; line-height: 1.5em; }
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #099;
z-index: 1;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #006;
background: #ccc;
padding: 5px;
border: 1px solid #006;
border-bottom: 0;
}
ul li a:hover { color: #600; background: #fff; display: block;} /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
/* Begin Tool Tip Span */
span {
display: none;
}
a:hover span {
z-index: 1;
position: absolute;
top: 1px;
left: 200px;
width: 220px;
display: block;
background: #fff;
border: 2px solid #006;
padding: 10px 10px 10px 5px;
}
/* End Tool Tip Span */
/*******************************************************************************
Positioning rules
*******************************************************************************/
div#leftbox {
position: absolute;
left: 10px;
width: 150px;
color: #333;
padding-top: 10px;
background-color: #fff;
z-index: 1;}
#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
padding: 10px;
background-color: #efefef;
}
div#rightbox {
position: absolute;
right: 25px;
width: 30%;
color: #666;
padding-top: 10px;
background-color: transparent;}
div#topbar {
margin: 0;
padding: 0;
width: 100%;
background-image: url('/images/default-topbar-bg.jpg');
background-repeat: repeat-x;
}
div#search {
color: #ffc;
font-size: 1.1em;
letter-spacing: .75em;
margin: 0;
padding: 0;
position: absolute;
top: 16px;
left: 20px;
word-spacing: 1em;
}
Your help and advice is most welcome and appreciated. Mark Hi Guys, we're having some problems with common versions of IE (some versions work, some doesn't). In other browsers site works perfect. Link 1 Link 2 (forum) Screenshot Problem is, that IE stops rendering page at some point (half of the page). It just shows blank white space. We don't have any ideas what and why that happens. I think problem is somewhere in CSS file. Link to CSS file Where could be the problem? p.s. Refreshing site doesn't help, but changing IE window size (or setting to full screen mode), helps even without refreshing. Then page just loads. http://i.domaindlx.com/wheelofgod/kingjames.asp The navigation bar isn't lining up I use Mozilla Firefox and the 2 images "examples" and "articles" are not in the column no matter how hard I tried. This might be a CSS problem. This is what I have: Code: /* Layout Stylesheet */
body {
margin:10px;
background:#FFFFFF;
color: #333333;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:1px solid #000000;
width:1050px;
margin:auto;
}
#hdr {
height:60px;
background:#9ACD32;
color: #333333;
}
#bar {
height:25px;
background:#688E23;
color: #FFFFFF;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #FFCC80;
color: #FFFF33;
width:650px;
padding:0;
}
#l-col {
font: Verdana;
float:left;
background:#9ACD32;
color: #333333;
width:120px;
}
#cont {
width:800px;
background:#FFFFFF;
font: verdana;
color: #333333;
border:solid #000000;
border-width:0 0 0 1px;
text-align:left;
}
#ftr {
height:25px;
background:#9ACD32;
color: #FFFFFF;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
Code: /* Presentation Stylesheet */
h3, p {
margin:0;
padding:15px;
}
h4 {
margin:0;
padding: 5px 0;
}
p:first-letter {
font-size: 80%;
font-weight: bold;
color:blue;
}
/*<![CDATA[*/a.piclink:active{color:red;background-color:grey;text-decoration:none}
a.piclink:visited{color:blue;background-color:grey;text-decoration:none}
a.piclink:hover{color:#B36B00;background-color:white;text-decoration:none}/*]]>*/
Hello--I'm trying to solve a problem that I've never been able to reproduce, but my client insists that it happens for them all the time. We've just launched a new site built on PHP and Smarty Templates (I'm posting on this board because I don't think it's a PHP problem...let me know if I'm wrong about that), but with lots of javascript and css. My client sent me a screenshot (attached) which shows that all of the stylesheet-formatted text is rendered without formatting...it's coming up Times New Roman with default colors. (Please ignore the blue boxes...I masked the identifying features of the image to protect the innocent :-) ). This goes away upon refresh, but it seems to happen (though never to me) often enough that we're worried about it. Has anyone ever seen anything like this? I'll be happy to reproduce any code that anyone's interested in, but I wasn't sure where to start and I didn't want to have to display a bunch of irrelevant code. I searched the boards but couldn't find anything. Thanks in advance. Michael Schmidt Hi, link to wesbite why doesn't the drop down menu, that works in IE6 not work in Firefox 0.8? It is pure CSS, no Javascript. OK, I know it doesn't validate and don't care too much about that. I know putting tables inside an anchor tag is frowned on but hey, it works and I didn't think it up. I thought IE was the worst when it came to CSS compliance? Any ideas how I can fix it? Thanks, John On my re-design of www.samuraiblog.com , I have a DIV that has quite a bit of text in it. I have it set to 100%, but it only goes about 1/4 of the way. You can see what I mean here, on a test server, http://samuraiblog.dreamhost.com/index.php Thanks, -Sam Hi All, We develoepd an Application for a client. This application uses CSS for all text including drop-down menu text and input box text. My client is using XP as their OS and he tells me (sent a screen capture as well) he CANNOT read the drop-down boxes. Text is too small. On our machines (Win 98) there are no problems. Have tested on about 15 different client computers with no problems. Browser is not an issue as its the same for him on both Netscape and IE. Does ANYONE have a clue how to fix this? Doesn't seem logical to me - one OS should be the same as the other. However, we're talkin about MS products and who knows with them. Need urgent help on this one.. please.. anyone with ideas help me! thanks all. Peace. Aaron http://www.komta.com/iris.new/browse.php Just getting a rough layout idea for a client, so none of the links work, I know that much. I'm trying to go without tables, so the thumbnails are floated. The weird thing is, IE does it the way I expect, and FF is messing up...go look. For those who don't feel like it, Firefox is floating the thumbs, wrapping them correctly...but about 500 px south of where they should be in the document...and not in the containing element. Anyone have an idea? I'm going to go work on other aspects of the site, and hope you geniuses can save my ***...again. Thanks, and I appreciate the help! MPEDrummer |
|||||||