|
CSS - "ghosting" Problems With Text And Images In Ie6
I only have IE 6, so Im not sure if I have the same trouble in other versions of IE. The site looks great in FF 2 though!
View: http://www.angelsar.org/development/funding.php - in FF then in IE6 and you cant miss what I'm talking about. Here is the CSS that came with the template I'm using: Code: body {
background: url(bg.png);
background-repeat: repeat-x;
background-attachment: fixed;
margin: 0 0 0 0 ;
}
div.top {
height: 50px;
background-color: blue;
border-bottom: 2px solid #eaeaea;
color: #fff;
}
div.top h1 {
letter-spacing: -2px;
font-size: 40px;
margin: -5px 0 5px 0;
padding-left: 10px;
}
div.top h1 a { text-decoration: none; color: white; }
div.body {
padding: 10px;
font-family: tahoma;
}
div.left h2, div.right h2 {
border-bottom: 1px dotted;
font-size: 16px;
padding: 10px;
margin-top: -0px;
}
div.right h5 {
margin-left: 10px;
margin-top: 0px;
}
div.left {
background-color: #fff;
padding: 5px;
float: left;
min-height: 400px;
width: 200px;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
div.right {
background-color: #fff;
padding: 5px;
min-height: 400px;
margin-left: 220px;
border: 1px solid #fff;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
div.footer {
clear: all;
margin-top: 15px;
border: 1px solid #fff;
font-size: 90%;
}
ul.menu {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
ul.menu li {
border-bottom: 1px solid white;
padding: 1px;
}
blockquote {
padding: 10px;
border-left: 1px dotted blue;
}
ul.menu li a {
padding: 5px;
display: block;
text-decoration: none;
border-bottom: 1px dotted;
border-left: 1px dotted;
padding-left: 15px;
font-size: 85%;
}
ul.menu li a:hover {
background-color: #eaeaea;
border-left: 10px solid blue;
padding-left: 6px;
}
p {
padding: 5px;
font-size: 90%;
}
img.rightBorder { float: right; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.leftBorder { float: left; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.border { border: 1px solid #808080; padding: 5px; margin: 5px; }
span.gray { color: #808080; }
span.gray a { color: #808080; text-decoration: none; }
The only thing that doesn't validate is clear: all; under div.footer but even when removing that, it doesn't solve my problem. Any help would be appreciated! Thanks! Similar TutorialsI'm taking over a departmental web page that has a whole bunch of Code: <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> in the web pages. Does anyone know how to put this in a stylesheet so that I don't have to put this code in every <body> tag when I create a new page? I've searched all over and can't find a reasonable resolution. Thanks what is the equivilant to <table border="1" cellpadding="2" cellspacing="0"> in css? i've tried PHP Code: table { border-spacing: 0px; padding: 0px; border-colapse: colapse; border-style: solid; border-width: 1px; } td { border-style: solid; border-width: 1px; padding: 2px; } That makes the width 2px wide though. I want it to only be one. And the padding seems to be messed up as well. hey, i have 2 CSS problems. number 1: my main <div> is not centered in IE. it's fine in FF, mozilla, and opera, but it stays all the way to the left in IE. Code: #main { width: 77%; margin: 0 auto; border: 1px solid #999; overflow: auto; background: #970303; color: #FFF; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; }
Code: <div id='main' align='center'> number 2: i can't figure out this gradient background stuff. i have an image, 1 px wide and 1000 px high. it works fine, but once theres enough information on a page, and its longer than the 1000px, the image starts over and looks extremely unprofessional. how can i make so that the one gradient image is stretched out for the length of the page? thanks. I'm using the CakePHP framework to build my site. I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width. Here's what it's supposed to look like. http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user.. Here's what I currently have. http://planet-rpg(dot)com Here's my coding. html Code:
<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
<title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
<?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
<div id="frame">
<div id="container">
<div id="main_content">
<p>Content area</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>
css Code:
html {
background: #2b435d;
}
html, body {
margin: 0;
}
body, table {
color: #303030;
}
img { border: 0; }
#body {
background: #d8dde8;
padding: 0 0 16px;
}
#page-wrap {
min-width: auto;
margin: 10px auto;
}
#frame {
margin: 0 auto;
padding: 0px 1170px 0px 220px;
margin-top: -17px;
}
#main_content {
background-color: #fff;
}
#header {
background: url("../img/header.png") repeat-x bottom left;
height: 64px;
margin-top: 36px;
}
#navigation {
background: url("../img/navigation.png") repeat-x bottom left;
height: 31px;
margin-top: -20px;
font-family: "Arial", sans-serif !important;
font-size: 14px;
color: #fff;
text-shadow:-1px -1px 0 black;
list-style-type: none;
padding:1px 5px 1px 220px;
}
#navigation li {
float: left;
}
#navigation li a {
border-left: 2px solid #303030;
text-shadow:-1px -1px 0 black;
color: #D0D0D0;
font-size: 14px;
font-weight: bold;
text-decoration: none;
display: block;
height: 21px;
padding: 6px 12px 1px;
}
#navigation li a:hover {
color: white;
text-shadow:-1px -1px 0 black;
}
#navigation li.first {
padding-left: 236px;
margin-left: -236px;
text-shadow:-1px -1px 0 black;
}
#navigation li.first a {
background: url("../img/cursor.png")bottom center no-repeat; height:24px;
color: #6193c7;
border: 0;
text-shadow:-1px -1px 0 black;
}
#logo {
width: 166px;
height: 50px;
margin-top: -32px;
margin-left: 20px;
position: absolute;
z-index: 2;
}
#footer {
background: #607080 url("../img/footer.png") repeat-x;
height: 60px;
padding: 30px 0;
clear: both;
}
#top_bar {
background: url("../img/top_bar.png") repeat-x bottom left;
height: 36px;
font-family: "Arial", sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
height: 36px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 5;
}
I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed. Hope someone can help me with my question. http://stuweb.cms.gre.ac.uk/~as234/full/full.htm some problems: in IE the menu at the top is "block" level but i want it to be in a line? whereas in ff its ok! in ff, one of the menu image (called "main" on the left of review) doesnt appear but if u hover over it, u will see the rollover image! the background colour should be grayish however that DOESNT happen! I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) (I originally posted this at the end of another of my topics but I don't think it was seen). I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen. Example Picture The site itself. Any ideas? I've been puzzling over this for a while now! I'm trying to make the footer stick to the bottom of the page even when the content isn't long enough. I have read many tutorials but none of them ever seem to work out quite right. I have created two pages to demonstrate the problems that I am having. http://www.explosiveracing.net/xmed...all_content.htm This is a page without much content and as you can see the footer is pushed to the bottom. All is well in FF but in IE the footers background seems to randomly disappear. Sometimes on a refresh it reappears but I cant work out what is causing it. http://www.explosiveracing.net/xmed...ong_content.htm This page has a large amount of content that pushes the footer further down. In IE though, the content partially overlaps the footer and the background image also still randomly disappears! Any ideas? I 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;
}
Okay here's the problem, I have used px instead of % and I have a feeling it's ruined my whole site because of the fact that users can set their font size custom which TOTALLY messes up margins and things that I have set so precisely. Here is my site: www.msredimp.000webhost.info At small it works perfectly and the forms stay all normal, but when it's increased or decreased it totally ruins it. Is there a way to force the settings in Mozilla to normal size? Or any other way? Thank you, and sorry for being such a newbie. Hi guys, For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ? Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html). Thank you Hi, I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser. Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important. I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML Here is my Html PHP Code: <DIV id="nav"> <ul> <li id="1"><a href="Home">Home</a></li> <li id="2"><a href="About-us">About us</a></li> <li id="3"><a href="FlexNews">FlexNews</A></li> <li id="4"><a href="Careers">Careers</A></li> <li id="5"><a href="Contact">Contact</A></li> </ul> </div> Pretty straight forward, now my css PHP Code: #nav { width:1005px; vertical-align: middle; text-align: left; } #nav ul { list-style: none; padding: 0; margin: 0; } #nav li { float: left; text-align: left; } #1 a{ line-height: 20px; float: left; width: 215px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #1 a:hover { line-height: 20px; float: left; width: 215px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a{ line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #2 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a { line-height: 20px; float: left; width: 211px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #3 a:hover { line-height: 20px; float: left; width: 211px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a { line-height: 20px; float: left; width: 184px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #4 a:hover { line-height: 20px; float: left; width: 184px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; border-right-width: 2px; border-right-style: solid; border-right-color: #FFFFFF; } #5 a { line-height: 20px; float: left; width: 183px; display: block; color: #000000; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 17px; } #5 a:hover { line-height: 20px; float: left; width: 183px; display: block; color: #FFFFFF; text-decoration: none; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background-color: #33A02C; text-indent: 17px; } Here is an exmple link http://dev.121design.co.uk/flextrade2/ Works fine in IE but not in Firefox, heres hopling someone can help. Thanks in Advance, tried so many different methods and none seem to work. Cheers, Stuart Hi All, Developed a weird issue in FF and IE8 and am not sure what to do with it. I have some tables that will just not display correct, the table is rendering a little too small and making the text overflow the cells. Its really odd and not sure what to do about it? I took a screen shot in IE, but the have happens in FF. Anyone any ides? Hi, I'm using XHTML & CSS (strict dtd) and using one large table to format my pages. Within the table I have different alignments and any other sort of thing that you would find in a table. W3.org says my XHTML --AND-- CSS are VALID, so why does the main table render off to the left of the page in Netscape?? Everything within the table is great, but the table itself is not centered. I'm using CSS in the following manner to try to center it currently Code: <!-- All the doctype stuff and head tags go here...--> <body style="text-align:center"> <!-- Rest of the document --> It works greate in IE (but what doesen't), so is this the wrong attribute to use to center the documents content in Netscape. As you may know "<center>" is not defined in the XHTML strict dtd so that options out. Thanks for any help or suggestions, Kalan Hi guys!! W3 discourages empty <p>s. Should I put <p title="something">text</p> instead? Please refer to: http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 Thanl you Is there away, using CSS techniques, to have "hots pots" on an area (that perhaps has a background image), where mousing over them "turns on" a (smaller) image at that spot, and when the mouse has moved out of the area, the image "turns off"? Sort of like a large image with "secret" hot-spots that reveals secret images when you mouse over them? Sorry about all the "quotes"... Hi, I'm not overly accomplished when it comes to CSS so here's my question. I've got the following HTML code: Code: <input type="text" name="field1" value="value1" style="width:100%"> I'm preloading a value into this text field which may run past the visible length of the textbox. The text box is situated inside a table cell. The text box fills the table cell space completely whilst the text inside it does not run over but once the text is more than can be displayed in the space provided by the table cell, it forces the textbox to grow. My question is, is there a way around this so that I can still instruct the textbox to be 100% width of the table cell without expanding when the text overflows. Thanks. How do I get a seperate scroll bar for the text on my website? I want to make it so that when you go to type something into the textbox(lastname or firstname) the menu stays open. right now if you try and type something into the textbox the menu closes but you still keep right on writing and then go back into the menu and click the submit button. I also want it so that you can press the <enter> key on your keyboard and it will submit the search query that you are working on. if there is a better way of doing this all please let me know this is menu.php PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>BHI and Roth's Website menu</title> <?php <link rel="stylesheet" type="text/css" href="menu_css.css" /> </head> <BODY STYLE="background-color:transparent"> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="home.php" target="showframe">Home</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Fill-in a form</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="form_bhi_hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_for_adding_email_addresses.php" target="showframe">Email database</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_support_application.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View the form data</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="view_102hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Search Addressbook by:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Last Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="lastname_search.php" method="post" target="showframe"><input type="text" name="lastname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>First Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="firstname_search.php" method="post" target="showframe"><input type="text" name="firstname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <li class="pureCssMenui"><a class="pureCssMenui" href="sa.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Resources</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenui"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View BHI Brochure -></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.pdf" target="_blank">in .pdf format</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.swf" target="_blank">in .swf format</a></li> </ul> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="gallery.html" target="showframe">Photo Gallery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="edit.php" target="showframe">Edit account information</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="logout.php" target="_top">Logout</a></li> </ul> </body> </html> <?php } } } else //if the cookie does not exist, they are taken to the login screen { header("Location: login.php"); } ?> </html> And this is menu_css.css Code: #pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:0px;top:100%;}
ul.pureCssMenu ul ul{position: absolute;left:100%;top:0px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#990033;
background-repeat:repeat;
border-color:#FFEE00;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:210px;/*width:138.6px;*/
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#990033;
border-width:0px;
border-color:#990033;
border-style:solid;
text-align:center;
text-decoration:none;
padding:4px;
_padding-left:4;
font:normal 11.5px Verdana;
color: #FFEE00;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none;
padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#BB99BB;
background-image:none;
}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#FFEE00;
border-color:#0099cc;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#FFEE00;
border-color:#990033;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently. However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image. If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall. (URL address blocked: See forum rules)/cv/cv.html This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work? |
|||||||