|
CSS - Crazy Ie Giving Me Trouble!
please click here to read my message.
My code: Code:
#whitebox {
width:600px;
background-color:#fff;
padding:10px;
margin-left:auto;
margin-right:auto;
}
#salmonbox {
width:500px;
height:50px;
padding:10px;
background-color:salmon;
margin-left:auto;
text-align:left;
}
Similar TutorialsI am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it. Any ideas on how to rectify this? Code:
<td><input type="text" class="loginbox" size="13" /></td>
.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}
I need help with my navigation menu... The problem is that I want the div container to be gray, but the white navigation links have gray bleeding below and to the right of each link. It also screws up any border I try to put between the navigation menu and anything else below it. Here is the markup: <div id="container"> <div id="header"> <h2>Test Header</h2> </div> <div id="left_column"> <ul> <li class="main_nav"><a href="#">Link 1</a></li> <li class="main_nav"><a href="#">Link 2</a></li> <li class="submain_nav"><a href="#">Sublink 1</a></li> <li class="submain_nav"><a href="#">Sublink 2</a></li> </ul> <p class="p_left_column">This stuff goes below the main navigation menu.</p> </div> <div id="main_column"> <h2>A test heading.</h2> <p>A test paragraph.</p> </div> <div id="footer"> Test footer </div> </div> And here is the style sheet for div left column: #left_column { float: left; width: 160px; margin: 0; padding: 0; line-height: 130%; } #left_column ul { padding: 0; margin: 0; list-style: none; } li.main_nav, li.submain_nav { text-align: left; width: 100%; display: block; /*border-bottom: 1px solid #aaa;*/ } li.submain_nav { line-height: 110%; } li.main_nav a { padding: 5px 0 5px 8px; display: block; color: #0380B7; font-size: 16px; background: #fff; text-decoration: none; } li.main_nav a:hover, li.submain_nav a:hover, li.main_nav a.active:hover, li.submain_nav a.active:hover { background: url(./images/right_arrow.gif) left no-repeat #eee; color: #00F; } li.submain_nav a { padding: 0 0 1px 20px; display: block; color: #0380B7; font-size: 13px; background: #fff; text-decoration: none; } li.main_nav a.active, li.submain_nav a.active { background: url(./images/right_arrow.gif) left no-repeat #fff; color: #00F; } p.p_left_column { font-size: 13px; line-height: 130%; font-family: arial, helvetica, sans-serif; border-top: 1px solid #aaa; padding: 5px; color: #000; } p.p_left_column a { border-bottom: 1px dashed #99CF16; text-decoration: none; color: #0380B7; } p.p_left_column a:hover { border-bottom: 1px solid #00f; color: #00f; } Any help would be greatly appreciated. Thanks for reading. Hi there, First of all, i posted this in the HTML section as well, but after some consideration i think it is a CSS needy question. However i can not remove my own post from the HTML section? Problem explained: I would like to give a maximum width to a text in a <pre> </pre> tag. Now by giving it a standard width or a width via a cascading style sheet class does not work. I also tried wrapping it in a table and / or a div with the width attribute. Anyone got an idea how to solve this? Regards, Sander Meilink By the way, pre does what it is supposed to do, it remembers the linebreaks a.o. very well. Example of all things tried combined: Code:
<table cellspacing="2" cellpadding="2" border="0" width="20">
<tr>
<td width="20"><div style="width: 20px;"><pre style="width: 20px;">asd fasod khgfas kjdgfkjasg dfkjhsagd fjgas sadkjfg dsafkjhg sdfkhg jhg jkhgdsfjkhg jkhgsdfa</pre></div></td>
</tr>
</table>
Hey all.. I'm still new to CSS in general, but know how it works. Anyway, I'm trying to get an element in a DIV to display properly, but for some reason, it isn't Code:
.contenthead {
background-image: url(player/images/player_03.gif);
background-repeat: repeat;
height: 50px;
color: #000000;
font-weight: bold;
font-size: 40px;
}
The result is at http://www.fairfieldmediacoop.com/fpactest/play.php?recordID=hO2GmjtlvSJKBgcqp4LZ The only thing I can think of is that the text I am trying to enlarge, which is the "Chamber Talk" in black above the video (center of the strip under the header) is encased in a Table. Would that cause it not to listen? i have a horizontal navigation pane in which i want 5 links to be placed across the top. any ideas? ive tried setting the width a percentage and a fixed width but no luck. width:50px; EDIT Never mind, fixed it myself eventually. Hi I have a master page in my .net project that has a template. In this template it has a line for all links a:link { color......} So all my pages get this style sheet. Now I have a jquery tab plugin that has a theme and it also uses a:link{} but it uses white but the a:link in my master page is overriding this. When I look with firebug at the css the color from the jquery theme is crossed out. How can I stop this from being crossed out? I need someone to look at my site and see why it doesnt work right in internet explorer, and looks fine in mozilla and google chrome. I am sure it has something to do with a .css file somewhere. glockpartsrus.com/products.php?cat=46 for an example. I'm so excited! I recently decided to try again (the third time) to see if I could convert my horrid table layout to divs. I was finally able to make something reletivly good in most browsers, but I am still having alot of browser-related problems! Normally I would have given up by now...but i found that my table layout was at 28 seconds over 56.6 ( :O ) and once i converted it it was only 3 seconds over (double :O ) Anyway, pretty much everything validates (including the css) when I put in the doctype, but when the doctype is in it looks like a mess in all browsers. I've been using transitional xhtml. When I take it out it looks better in all browsers, but is still really bad in all but IE. I have put together on my site two pages with the same code except one has the doctype and the other doesn't. The css for both is: Code: body {
background: #EFF7FF url(bg.gif);
text-align:center;
padding:0;
}
#outer {
border:5px double #234B77;
width:650px;
padding:0px;
margin:0px;
}
#hdr {
width:650px;
height:151px;
background: #21558C;
}
#bar {
width: 650px;
height:90px;
background: #ADD7EF url(rainbowsitedesign_2x1.gif);
border:solid #000000;
border-width:0px;
padding-top: 37px;
text-align:left;
}
#bodyblock {
position:relative;
background: #ADD7EF url(backgroundforsite.gif);
width:650px;
padding:0;
}
#l-col {
float:left;
background: #ffffff url(white.gif);
color: #333333;
width:140px;
border-left: 1px solid #234B77;
border-right: 1px solid #234B77;
border-top: 1px solid #234B77;
border-bottom: 1px solid #234B77;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
#coltop {
height: 42px;
background: #3971B5 url(tabletop.gif);
color: #000;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#cont {
width:485px;
background: #ffffff url(white.gif);
border-left:1px solid #234B77;
border-right:1px solid #234B77;
border-top:1px solid #234B77;
border-bottom:1px solid #234B77;
text-align:left;
margin-top:10px;
margin-bottom:10px;
margin-right:5px;
font-size: 100%;
font-weight: normal;
color:#1A3958;
}
#contentop {
width:485px;
height:42px;
background: #3971B5 url(tabletop.gif);
color: #333333;
border-left:0px solid #234B77;
border-right:0px solid #234B77;
border-top:0px solid #234B77;
border-bottom:1px solid #234B77;
margin:0px;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#ftr {
width:650px;
height:25px;
background:#346EB4;
color: #333333;
border: 0px solid #000000;
margin:0;
}
#ftr2 {
width:650px;
height:25px;
background:#346EB4;
border: 0px solid #000000;
margin:0;
}
#ftr3 {
width:650px;
height:99px;
background: #346EB4 url(websitedesign.gif);
border: 0px solid #000000;
margin:0;
padding-top: 20px;
}
#home {
width:50px;
height:10px;
border: 1px solid #000000;
margin:0;
}
p:first-letter {
font-size: 120%;
font-weight: bold;
}
a.red:link { text-decoration: none; color: #234B77; }
a.red:visited { text-decoration: none; color:#ff0000; }
a.red:hover { text-decoration: underline; color:#ff0000; }
a.orange:link { text-decoration: none; color: #234B77; }
a.orange:visited { text-decoration: none; color: #ff6600; }
a.orange:hover { text-decoration: underline; color:#ff6600; }
a.yellow:link { text-decoration: none; color: #234B77; }
a.yellow:visited { text-decoration: none; color: #ffff00; }
a.yellow:hover { text-decoration: underline; color:#ffff00; }
a.green:link { text-decoration: none; color: #234B77; }
a.green:visited { text-decoration: none; color: #009900; }
a.green:hover { text-decoration: underline; color:#009900; }
a.blue:link { text-decoration: none; color: #234B77; }
a.blue:visited { text-decoration: none; color: #0000ff; }
a.blue:hover { text-decoration: underline; color:#0000ff; }
a.violet:link { text-decoration: none; color: #234B77; }
a.violet:visited { text-decoration: none; color: #660066; }
a.violet:hover { text-decoration: underline; color:#660066; }
#ftr2 a:link { text-decoration: underline; color: #152F4D; }
#ftr2 a:visited { text-decoration: line-through; color: #ccc; }
#ftr2 a:hover { text-decoration: none; color: #88B2DC; }
Here are the two pages: With doctype: http://rainbowsitedesign.com/withdoctype.html Without it: http://rainbowsitedesign.com/nodoctype.html How can I fix both my browser problems and my doctype problems? Any help is app! Hi All, I am trying to make my table do the attached, where it has a border around the entire table but has a 2px space edge... Like the attched image, any ideas? Resolved! Hi all, I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified. How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments. Thanks in Advance. - John I'm TRYING to design a site with CSS, but every browser seems to display CSS differently. How do I do it? How can I make a CSS site that'll render properly in IE6 & 7 and FF, and at 800x600 and 1024x768? This is driving me absolutely bonkers. Look at my site: http://www.firstinsurancefunding.net/ It displays differently in EVERY different browser. WHAT'S THE FIX?? (sorry, I'm frustrated. Could really use some pointers). I have been working on this problem for the past week now. When I set the height of #main to 100%, it basicly acts like there is nothing in it and all you see are the leftcontent, centercontent, and rightcontent which stretch to the length of the content they hold. I want to have the tanish area stretch all the way down. Right now I have it set as 700px height but if the data in the other 3 divs stretch further than 700px it goes past it (as you can see in this example: http://panik.owphosting.com/article.php?id=1 , This can only be seen in Firefox). so yea, this is crazy, I am also trying to keep this cross browser compatible. So im keeping firefox in mind. Someone please shed some light on this problem. Thanks for any help at all! Here is my website: http://panik.owphosting.com/home.php And here is my css: Code:
body {
margin: 0px;
color: #000;
font-size: 8pt;
font-family: verdana;
height: 100%;
width: 100%;
background: url("images/bg2.jpg");
}
a {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: none;
}
a:visited {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: none;
}
a:hover {
color: #237CBB;
font-weight: bold;
font-size: 8pt;
text-decoration: underline;
}
#wrap {
position:relative;
min-height:100%;
}
* html #wrap {
height:100%;
}
h1 {
font-family: verdana;
color: #000;
font-weight: bold;
font-size: 24pt;
}
#header {
border-left: 2px solid #000;
border-right: 2px solid #000;
background: #FBF2D9;
width: 700px;
margin: 0;
}
#main {
position: relative;
width: 700px;
border-left: 2px solid #000;
border-right: 2px solid #000;
height: 700px;
background: #FBF2D9;
}
#leftcontent {
position: absolute;
padding-top: 10px;
padding-left: 2px;
padding-right: 2px;
border-left: 2px solid #000;
left: -2px;
background: #FBF2D9;
width: 150px;
}
#rightcontent {
position: absolute;
padding-top: 10px;
padding-right: 2px;
padding-left: 2px;
border-right: 2px solid #000;
right: -2px;
background: #FBF2D9;
width: 150px;
}
#centercontent {
position: absolute;
left: 154px;
padding: 10px;
background: #FBF2D9;
width: 375px;
text-align: left;
}
#moduletop {
position: relative;
width: 130px;
padding: 5px;
color: #fff;
font-weight: bold;
text-align: center;
border: 1px solid #000;
background: #26476C;
}
#modulebottom {
position: relative;
width: 130px;
padding: 5px;
color: #fff;
text-align: left;
font-size: 8pt;
border: 1px solid #000;
border-top: 0px;
background: #4184B4;
background-image: url("images/modulefill.jpg");
background-position: 0% 100%;
background-repeat: repeat-x;
overflow: auto;
}
#modulebottom a {
color: #fff;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
#modulebottom a:visited {
color: #fff;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
#modulebottom a:hover {
color: #99D8FE;
font-weight: bold;
font-size: 10pt;
text-decoration: none;
}
table#news {
color: #000;
font-size: 10pt;
font-weight: bold;
width: 375px;
margin: 0;
border: 0;
vertical-align: top;
}
table#news div.head{
color: #237CBB;
font-size: 10pt;
width: 375px;
font-weight: bold;
}
table#news div.date{
color: #919191;
font-size: 8pt;
width: 375px;
font-weight: 100;
vertical-align: top;
}
table#news div.detail{
color: #000;
font-size: 8pt;
width: 375px;
font-weight: 100;
vertical-align: top;
}
table#news div.foot{
color: #000000;
font-size: 10pt;
font-weight: bold;
margin: 0;
width: 375px;
}
shout{
width: 130px;
overflow: auto;
}
Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes? Hi, I've got a strange problem, which I'm sure the answer to it is simple, but it escapes me at the moment. I have a site we're building at: 209.200.245.223/$sitepreview/quality-edge.com/content.aspx?usertype=2&page=home And as you can see, the background image is cut off (the colour on the left-hand side should be seen to fade out. I had to use min-height to get it to show, but I don't think that I completely understand min-height. Mainly my problem is the footer and the background. I think I've read every footer how-to there is and I can't seem to get anything to work properly. I'm not new to CSS so this is really frustrating me. Any help would be greatly appreciated. Thanks, Steph Ive been at this for almost 6 days, searched the realm for help, googled, IRC'd, worked side by side with templates - even a 2 column setup and for some reason it can't render in IE. Also looked at the Tan hack, whitespace hacks.. Would you be so kind to tell me what I can do to make this work in IE? You can find the CSS by clicking Valid CSS, and html as you know- source. Thanks dearly Site Hi, I have a very odd IE6 issue occuring within my site which I hope someone can help me with. Here is my xhtml And here is my css I have commented both the relevant CSS and HTML with "TEXT PROBLEM IN IE" so you can find it quickly. Please ignore the functionality, this is very much in the development phase. The problem I have is that under the categories listed - in IE there are the letters "c" and "e" which seem to have been duplicated from the last category "executive office". If you select the "ce" in the browser you will see what I mean. This doesn't happen in FireFox etc. Cheers Our pages all validate and work fine in all browsers (opera, firefox, mozilla, ie6, 5.5, nn >= 4.8) but in ie 5.01 the page content is far too long...a badly drawn ascii example: normal view: nav | content nav | content nav | content footer-------- problem in ie 5.01 Code: | content
| content
| blank
| blank
nav | blank
nav | blank
nav | blank
| blank
| blank
| blank
| blank
footer--------
Hope that makes some kind of sense. Basically IE is pushing the nav down, but it also seems to be adding the contents height below the nav as well I have a major problem with my site rendering in FF, there is a space between the header and nav bar that I don't see in IE and can't find a fix!! I have gone over and over the CSS and XHTML and just can't see what would be doing this. Anyone know how to fix it?? Click Here for My Website CSS code - Code: body {
background-color:#0071E1;
background-image: url(images/head.png);
background-repeat: repeat;
margin-top: 25;
margin-bottom: 25;
margin-right: 0px;
margin-left: 0px;
}
/* LAYOUT */
#catbg {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg1 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 20px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
width: 98%;
}
#catbg2 {
color: #009900;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg3 {
color: #990000;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 25px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
#catbg4 {
color: #0066CC;
padding-left: 10px;
padding-right: 10px;
background: #dedede url(images/catbg.gif) repeat-x;
font-size: 16px;
height: 45px;
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: normal;
padding-top: 3px;
width: 98%;
}
/* Surrounding div */
#wrap {
width: 961px;
margin: 0 auto;
padding: 0;
top: auto;
}
/* Surrounding the nav and main content */
#wrapper {
width:925px;
align:center;
background-color:#FFFFFF;
background-image: url(images/newbkZ2.png);
background-repeat: repeat;
vertical-align: top;
border-top: #005FAC;
border-right: thin inset #005FAC;
border-bottom: #005FAC;
border-left: thin outset #005FAC;
height: auto;
padding: 0px;
margin: 0 auto;
}
/* Header surround */
#shad-l {
padding-left: 18px;
background: url(images/shadow-l.png) 0 0 no-repeat;
}
#shad-r {
padding-right: 18px;
background: url(images/shadow-r.png) 100% 0 no-repeat;
}
#header{
position:relative;
height:215px;
overflow:hidden;
background: #FFFFFF url(images/newbkZ2.png) repeat;
top: auto;
width: 925px;
margin: 0 auto;
}
#head-r{height:215px; background:url(./images/head-l.png) 0 0 no-repeat; position:relative}
#head-l{height:215px; background:url(./images/head-r.png) 100% 0 no-repeat; position:relative}
#logo {
display: block;
width: 900px;
height: 215px;
cursor: pointer;
padding-left: 30px;
padding-top: 10px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
position: relative;
background-position: center;
top: auto;
padding-right: 0px;
padding-bottom: 0px;
}
/* Navbar */
#nav {
margin: 0 auto;
width:925px;
height:38px;
font-family:Arial;
font-size:14px;
color:#ffffff;
background-image: url(images/navbg3.jpg);
background-repeat: repeat;
border-right-width: thin;
border-left-width: thin;
border-right-style: inset;
border-left-style: outset;
border-right-color: #005FAC;
border-left-color: #005FAC;
line-height: 1.8em;
font-weight: bold;
}
#navlist li
{
display: inline;
background-repeat: no-repeat;
padding-left: 10px;
}
#navlist a
{
font-weight: bold;
text-transform: none;
text-decoration: none;
font-size: 16px;
line-height:38px;
}
#navlist a:link, #navlist a:visited
{
padding-left: 25px;
color: #FFFFFF;
background: url(images/blue.png) no-repeat 0;}
#navlist a:hover
{
color: #FFFF00;
background-repeat: no-repeat;
background-position: 0;
background-image: url(images/green.png);
padding-left: 25px;
}
/* Main content Area */
#box1 {
margin:10px;
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px;
font-weight: bold;
float: left;
clear: left;
}
#box2 {
text-align:left;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}
#box3 {
text-align:center;
width:95%;
font-family:Tahoma;
font-size:14px;
color:#0066CC;
padding: 10px 30px 10px 20px;
font-weight: bold;
height: auto;
float: left;
clear: left;
}
/* Height Gap */
.hg {
margin:0 auto;
height:5px;
}
#footer{
background: url(images/footer-bg.png) repeat-x 100%;
text-align:center;
margin: 0 auto;
font-size:12px;
font-family:Tahoma;
color:#FFFFFF;
position: relative;
height: 130px;
width: 925px;
font-weight: bold;
line-height: 1.2em;
}
/* LINK STYLES */
/* Linkpage links */
a.weblink {
font-family:Arial;
font-size:16px;
text-decoration:none;
color:#0066CC;
font-weight: bold;
}
a.weblink:hover {
font-family:Arial;
font-size:16px;
text-decoration:underline overline;
color:#990000;
font-weight: bold;
}
/* Footer links */
a.footerlink {
font-family:Tahoma;
font-size:11px;
color:#FFFFFF;
text-decoration:none;
}
a.footerlink:hover {
font-family:Tahoma;
font-size:11px;
color:#FFFF00;
text-decoration:none;
}
/* All other links */
a {
font-family:Tahoma;
font-size:11px;
color:#0066CC;
text-decoration:none;
}
a:hover {
text-decoration:overline;
color: #990000;
}
#left {
float: left;
margin: 0;
padding: 20px 20px 0 30px;
width: 300px;
}
#right {
float: right;
margin: 0;
padding: 20px 30px 20px 20px;
width: 400px;
}
/* No image should have a border when linked */
.a img {
border: 0;
}
#bodyarea {
padding: 10px;
margin: 0;
background: #FFFFFF url(images/bodyarea-bg.gif) repeat-x;
font-family: Tahoma;
font-size: 9px;
color: #0066CC;
font-weight: bold;
text-align: right;
}
/* text classes */
.smalltext {
font-size: 10px;
font-family: verdana, sans-serif;
}
.middletext {
line-height: 14px;
}
.normaltext {
font-size: 12px;
}
.largetext {
font-size: 16px;
}
/* lightbox */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #FFFFFF; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images2/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images2/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #FFFFFF; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #0066CC;
background-image: url(images/head.png);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
}
|
|||||||