|
CSS - Help With Color Issues Display In, Yea Youve Guessed It Ie
http://www.turboconceptsllc.com/testmain
ok in IE 6 AND 7 this happens. basically the pictures are pngs with background colors the same as the boldy {} color which is 4D4D4D. BUT its showing a contrast. opera and mozilla this of course isnt a problem any ideas how to get around this? transparent PNGs are not an option as IE6 doesnt render them. also gifs are not an option as the quality is horrible Similar TutorialsHowdy, Okay, this is driving me nuts...i have the background-color set the same for the header and the footer, only the header is displaying darker than the footer. I've been going over it with a fine-toothed comb, but can't find the problem. here's the site and here's the css; Code:
/* Graphix Plus V 4.0 Styles */
h1 {
font-family:arial;
font-size:16px;
font-color:#006696;
font-weight:bold;
}
h2 {
font-family:arial;
font-size:14px;
font-color:#006696;
font-weight:bold;
}
body {
padding:0px;
margin-top:0px;
background-image:url(images/bground-pattern.gif);
background-color:#FFFFFF;
font-family:arial;
font-size:12px;
color:black;
text-decoration:none;
text-align:left;
border: 1px solid #E5E5E5;
}
.contentarea {
background-color:#FFFFFF;
padding:6px;
border: 1px solid #E5E5E5;
}
.flankers {
background-color:#C6C6C6;
padding:4px;
border: 1px solid #E5E5E5;
}
.header {
background-color:#006696;
padding:4px;
background-image:url(images/gp_v4_header.gif);
background-position:top left;
background-repeat:no-repeat;
}
a.mainnav:link {
font-family:arial;
font-size:12px;
color:black;
text-decoration:underline;
}
a.mainnav:visited {
font-family:arial;
font-size:12px;
color:black;
text-decoration:underline;
}
a.mainnav:hover {
font-family:arial;
font-size:12px;
color:#006696;
text-decoration:underline;
}
/* MAIN MENU LIST STYLE BEGINS - UL class = 'NAV'*/
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
border-bottom: 1px solid #E5E5E5;
background-image: url(http://www.graphixplus.com/images/no-pic.gif);
background-color:#C6C6C6;
}
ul#nav li {
position: relative;
}
li ul {
position: absolute;
left: 99%;
top: 0;
display: none;
background-color: #006696;
}
ul#nav li a:hover {
display: block;
text-decoration:none;
color:#E5E5E5;
background-color:#006696;
}
ul#nav li a {
display: block;
font-family:arial;
font-size:11px;
text-decoration: none;
color: #006696;
padding: 1px;
border: 1px solid #E5E5E5;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
ul#nav li:hover ul, ul#nav li.over ul {
display: block;
}
/*MAIN MENU LIST STYLE ENDS */
/* FOOTER STYLES */
.footer {
padding:10px;
background-color:#006696;
font-family:arial;
font-size:10px;
color:#c6c6c6;
text-decoration:none;
border: 1px solid #E5E5E5;
}
a.footnav:link {
font-family:arial;
font-size:10px;
color:#c6c6c6;
text-decoration:underline;
}
a.footnav:visited {
font-family:arial;
font-size:10px;
color:#c6c6c6;
text-decoration:underline;
}
a.footnav:hover {
font-family:arial;
font-size:10px;
background-color:#E5E5E5;
color:#006696;
text-decoration:underline;
}
/* end of footer */
Any help is greatly appreciated! Hello, I'm new to this forum, and somewhat new to CSS. I have learned enough about it to find my way around though, and I am still having problems changing one color on a theme. I have a Wordpress blog and am using a free theme I downloaded. It has a right and left sidebar. I would like to change the background color for both sidebars (they are not visually separated except by text). I have tried: .sidebar { line-height: 14px; font-size: 12px; background: #C4C2C2; } ...and that does change the background for them; but it does not extend to the footer. This new color only extends to the bottom of each sidebar content (so that if the blog portion is longer, the old color shows up below the new color). I have checked every single color in the css file, and I cannot find where this color is defined. Help, please!! This work in FF. CSS Code:
a:link.butt{
display: block;
width: 6em;
padding: 0.2em;
background-color: red;
border: 1px solid black;
text-decoration: none;
text-align: center;
}
HTML Code: <a href="#" class="butt">My butdfsf fd fds fds sd fdsaf aaton</a> Hi Hoping someone can give me a pointer to a small problem I'm having: Trying to achieve rounded corner buttons for a tags on a website using CSS and a nested <span tag. Relevant example page is at: http://www.mytophost.co.uk/test/test.html Styles are in the test.html page and the images used are at: http://www.mytophost.co.uk/test/button.gif http://www.mytophost.co.uk/test/buttonh.gif http://www.mytophost.co.uk/test/end.gif http://www.mytophost.co.uk/test/endh.gif All looks fine for me in IE, but bg images align differently in FF. I realise it's probably something in my CSS that's not compliant and so that's why IE works and FF not ... Any help greatly appreciated. Hello, I am trying to make a website www.jazzsurlaplage.ch/2007/home.php (sorry for the french script over there) Here is the issue : One Firefox or IE 7, the partners box appears to the right side of the page, whereas on IE 6, it appears way at the bottom. you can check out the html source on the page itself (I've written it, not generated, so it must be pretty easy to get) and the css is over here : www.jazzsurlaplage.ch/2007/style.css Here is the part in the file where I define the side box : Code: /*===========SIDE NAVIGATION==================*/
#sideinfo{
left:600px;
width:200px;
position: relative;
margin-top:3px;
margin-bottom:0px;
}
.sidebox{
margin:0px 0px 0px 0px;
padding:15px 0px 0px 0px;
width:200px;
height:30px;
position:relative;
background:transparent url(images/sidehead.jpg) left top no-repeat;
}
.sidebox .sidebody{
position:relative;
padding:0px 10px 0px 10px;
background:url(images/sidebody.jpg) left top repeat-y;
margin-bottom:0px;
text-align:center;
}
.sidebox .sidefooter{
position:relative;
height:30px;
width:200px;
margin-top:0px;
background:url(images/sidefoot.jpg) left top no-repeat;
}
/*============================END SIDE BLOCK===========================*/
/
Here is the part in the html file where I insert the box : Code: <? //sidebar echo '<div id="sideinfo">'; echo '<div class="sidebox">'; echo '<div class="sidebody">'; echo '<img src="images/partenaires.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/arg.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/chatnoir.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/coheran.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/heineken.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/semeuse.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/jardinnerie.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/raiffeisen.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/aurelys.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/mb.jpg" width="130"/>'; echo '</div>'; echo '<div class="sidefooter"></div>'; echo '</div>'; echo '</div>'; ?> What do I do, and where can I get more info on these kind of issues ? Thanks, Manojo intrigue.net -- please copy and paste (link not allowed here since I'm a new member) HTML & CSS both validate with no errors. The page displays correctly in Opera and Firefox, but in IE... 7+ does not color the menu (white), making it invisible <7 displays only half of the page I would love any assistance at all in getting this resolved (aside from bombing MS) Thanks in advance. -=-TS Does anyone know why IE7 is displaying this page incorrectly (when compared to Safari, Chrome, FF, IE8)? http://www.harrisdesigns.ca/dev/bestratefinders I noticed the font size at the top increases missing up my "Savings Calculated" - I'm assuming an if IE7 statement on the fonts will fix that. However, more troubling is the way to shoves the left column down. Any tips advice or ideas are greatly appreciated. Thanks in advance, CH... SOLVED Essentially it was a couple of over looked css errors. Left column shoving down was a float error as I forgot set a width, the font size errors were fixed by setting the margins and paddings to on the H elements and using ".px" for font sizes over "em" This is yet again another mysterious issue I am having with CSS and the notorious Internet Explorer. I have two divs fashioned into boxes. One is floated to the left the other is floated to the right. The height looks fine in FF but when you look at the bottom border of said 'boxes' the one on the right draws up sooner than the one on the left (when viewed in IE). The CSS definitions for both divs have the same height specified. Any help at all is very appreciated. http://www.ioforge.com/contact here is the site http://142.177.157.241:8080/bikers/ Well, I have some work to do about opera and IE since they are slow in the browsers making or the standards compliance. Even Opera8 doesn't suport my site and I think that was just released not too long ago. I think I'm going to be changing my browser of choice from Firefox to Netscape 8. I have the beta right now and it looks awesome and has all the functionality of Firefox I want plus it makes it easy to change between IE and netscape without actualy going to IE to see how my site looks. Two birds with one stone. Ok I've been working on this for hours. WordPress is generating some HTML that isn't displaying correctly. At this point I'm just working with the following CSS and HTML: CSS: Code: div#navcontainer {
border: 1px solid blue;
padding-left: 20px;
margin: 0;
width: 177px;
position: relative;
left: 0px;
}
div#navcontainer div#pagenav li.pagenav { /* the outermost list item; seems to apply to the title of the section */
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
padding-left: 0em;
padding-right: 16px;
margin-left: 0;
width: 175px;
font-weight: normal;
list-style: none;
list-style-type: none;
color: #4f2b0d;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a: link {
display: inline;
padding-bottom: 12px;
color: #4f2b0d;
position: relative;
left: -20px;
}
/* these are the links */
div#navcontainer div#pagenav li.pagenav ul li.page_item a:link { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: none;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item a:hover { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: underline;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a:link {
font-family: Georgia;
font-size: 36px;
color: #4f2b0d;
}
HTML: Code: <div id="inside_left_column">
<div id="sidebar">
<ul id="navcontainer">
<ul class="pagenav">
<li class="pagenav">About JCDS
<ul>
<li class="page_item page-item-58"><a href="...?page_id=58" title="Our Mission">Our Mission</a></li>
<li class="page_item page-item-56 current_page_item"><a href="...?page_id=56" title="Welcome from the Head of School">Welcome from the Head of School</a></li>
<li class="page_item page-item-60"><a href="...?page_id=60" title="School Leadership">School Leadership</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
I'm attaching screenshots of what it looks like now (purple underlined links, section title not bold, too much indentation, bullets displaying for all pages), and what I want it to look like (brown text, bold text for section name, no underlines (only on hover), left-aligned, bullet only on current page). I would love to get some help with this! -- TIA Laura S. Hello, I am having trouble with the display: inline tag. ******************************************** Here is the style: H1.nolinebreak { font-size : 12pt; display: inline; } Here is an HTML snippet: <p> Here is my content text. Blah blah <H1 class="nolinebreak"> inline header 1 </H1> blah blah blah <H1 class="nolinebreak"> inline header 2 </H1> </p> ******************************** The second and additional instances of the <h1 class="nolinebreak"> works great. But the first one always puts in a line break. I need them all to display inline. What am I doing wrong? Thanks in advance. good day, long title, i know this problem is very tricky and i have spent much too long on it, so i decided to ask it here. i have a site that is currently live, and in need of a great css artist to check out a bug for me. i have tested in firefox, ie 7 and safari, and all work fine, but in IE 6, when i use jscript to hide and show a <div></div>, for some reason, half a DIFFERENT <div></div> disappears, and turns into the bg-color. it's very peculiar since the <div></div> tag which gets messed up is seemingly unrelated if anyone has any quick recommendations, then i'd appreciate it, otherwise let me know and i can pm the login and pass to someone to check it out (i dont wanna post it on here since it im trying to keep the project under wraps right now) regards onassar Sorry for the "general" title but I don't know what is causing my problems, so it is hard to be specific... I am working on a web application for my summer research project, but I am not very knowledgeable in CSS. For the most part I am able to solve my problems except for the following: Issue 1: Profile Display Issue 1 CSS file The copyright at the bottom. Firefox displays correctly. Explorer displays too much white space above the copyright text. Issue 2 *IMPORTANT*: Profile Display (with missing fields) Issue 2 CSS file The text in the SME Profile does not display correctly when some of the fields are left blank (Issue 1 link shows a full profile). I'm trying to avoid using tables as it would cause some major setbacks in my work. FYI, the pages are dynamically generated so links will not work. Any suggestions? Hey everyone, I seem to be having problems on IE7 for a clients website (http://beitelligent.com/clients/sportsdome/ ).. If you view it on IE8 or Firefox 2.X+ it seems to display correctly, all on the same line.. on IE7 it still displays it as a list.. Does anyone know why this is? Thanks, Peter Barbosa I can forsee having display issues on smaller screens and idk how to prepare for this. For example if i use the margin or padding property to say..center an image or align text. Keeping in mind that for example my wrapper div is coded in percent(other things too). So smaller screens=shrinkage, but the code thats not percent values will stay the same. The code is kind of a mess the most used components are at the top. Code:
body {background:#white;
}
#wrap {margin-left:20%;
margin-right:20%;
}
#header {border: 2px solid grey;
background:white;
}
#titlearea {
height:100px;
padding:4px;
font-family:Verdana;
}
#belowimg {background:#6a7c63;
margin:0px;
height:40px;
border-top:2px solid grey;
}
.link {float:left;
margin-top:8px;
margin-left:5px;
background:#6a7c63;
border-right:1px solid #681300;
height:20px;
width:100px;
text-align:center;
text-decoration:none;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:8px
}
.linklast {float:left;
margin-top:8px;
margin-left:0px;
background:#6a7c63;
height:20px;
width:100px;
text-align:center;
text-decoration:none;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:8px
}
#main {border:1px solid grey;
background:tan;
padding:10px;
padding-right:0px;
margin-top:0px;
font-size:.80em;
font-family:Verdana;
color:#000000;
height:100%;
}
#rightcontent {float:right;
border-left:1px dashed grey;
padding-left:0px;
padding-right:0px;
height:90%;
width:230px;
font-size:small;
margin-left:8px;
background:white;
}
.button {
font-size:small;
font-family:Verdana;
border-top:1px solid grey;
padding:8px;
margin:0px;
padding-bottom:0px;
background:white;
}
.button.center {
padding-left:23px;
text-align:center;
}
.button.right {float:right;
border:1px solid red;
padding:2px;
background:blue;
}
#imagescroller{width:530px;
float:left;
margin-right:10px;
margin-left:10px;
height:300px;
padding:4px;
border-top:2px solid #f1e1b8;
border-left:2px solid #f1e1b8;
border-right:2px solid #f1e1b8;
border-bottom:2px solid #f1e1b8;
background:blue;
}
#bottom {background:blue;
border-bottom:2px solid red;
border-right:2px solid #f1e1b8;
border-left:2px solid #f1e1b8;
height:30px;
padding:0px;
color:grey;
margin-top:0px;
width:600px;
height:30px;
}
.box {
padding-top:0px;
margin:1px;
font-size:.80em;
font-style:strong;
float:left;
color:grey;
background:white;
font-family:Lucida Grande;
line-height:1px;
margin-top:196px;
}
.left {float:left;
padding-right:20px;
padding-bottom:0px;
margin-bottom:0px;
}
.right {float:right;
border-left:1px solid grey;
border-bottom:1px solid grey;
background:white;
}
.inside {border-top:1px solid white;
padding-left:3px;
padding-right:3px;
background:#ffa812;
font-family:Verdana;
font-size:.70em;
height:20px;
background:#EEC900;
color: #000000;
}
.bottom {height:10px;
background:#DEECFF;
border-top:1px solid grey;
}
.imagebottom {background:white;
border-bottom:2px double #f1e1b8;
padding:3px;
color:grey;
}
#blockquote {margin-left:18%;
font-size:.60em;
padding-left:40px;
color:brown;
font-family:Verdana;
font-style:italic;
background:white;
border-left:4px dotted orange;
}
#topping {border-bottom:1px solid grey;
margin-left:1px;
margin-top:4px;
}
#bottomborder {border-bottom:1px solid grey;
margin-left:1px;
}
#footer {border:1px solid grey;
height:30px;
margin-top:5px;
}
#test {height:20px;}
.test1 {margin-top:3px;
border-top:1px solid #fcfcfc;
height:0px;
}
.test2 {height:0px;
border-top:1px solid #f5f5f5;
}
.test3 {height:0px;
border-top:1px solid #ededed;
}
.test4 {height:0px;
border-top:1px solid #e5e5e5;
}
.test5 {height:0px;
border-top:1px solid #dedede;
}
.test6 {height:0px;
border-top:1px solid #d9d9d9;
}
.test7{height:0px;
border-top:1px solid #d3d3d3;
}
.test8 {height:0px;
border-top:1px solid #cfcfcf;
}
.test9 {height:0px;
border-top:1px solid #c9c9c9;
}
.test10{height:0px;
border-top:1px solid #c2c2c2;
}
#testy{height:20px;
color:000000;
}
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em;} /* 16px */
h6 {font-size: 1em; font-family:Verdana;color:brown;} /* 14px */
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #c7a01e;
padding: 0 1px;
text-decoration: none;
}
a:hover, a:active {
/*background-color: #C74350;*/
color: #f09419;
text-decoration: underline;
text-shadow: 1px 1px 1px #333;
}
strong, b {font-weight: bold;}
060 em, i {font-style:
Thanks My special font displays correctly in all browsers except the new firefox. It even worked in the older firefox before the new update. I am not sure why this is happening or how to fix it. Here is the code in the html page: Code: <head>
<style type="text/css">
@font-face {
font-family: English;
font-weight: normal;
src: url(fonts/English_.ttf);
}
</style>
</head>
<div class="content">
<h1> Beckin Designs</h1>
Here is the CSS rules in my external CSS sheet: Code: .content h1 {
font-family: "English", sans-serif;
font-size: 52px;
font-style: normal;
/* [disabled]text-transform: uppercase; */
color: #F7F7F7;
text-decoration: none;
width: 930px;
text-align: center;
margin: -10px 0 5px 0;
padding: 0;
}
Thanks! Hi guys, I am building a page with CSS and I'm running into some problems with the CSS buttons I'm trying to use. Right now I have a large box along the top of the page and want two rows of buttons inside of it. These text on these buttons will likely be changing on a semi-regular basis. So instead of using gif buttons made in a graphics program, I'm using CSS to create the buttons. Since each row will have multiple buttons, I first used the display:inline; item and it worked fine in IE. In FF however, the buttons lost their height and width. If I also used the float:left; it worked right, but the buttons were not centered. In looking for a solution, I discovered that inline items cannot use the height and width properties. Any ideas on how to get what I'm looking for? I can't post a link, because this is an intranet page, but here is my relevant code... CSS Code: Original - CSS Code /*the main box which will contain the buttons*/ div#Main-buttons { width:96%; margin:2%; margin-top:10px; height:100px; padding-top:10px; background-color:#84C394; border:ridge medium #004500; } /*adjustments for FireFox*/ html>body div#Main-buttons { width:90%; margin:5%; margin-top:10px; height:100px; padding-top:0px; background-color:#84C394; border:ridge medium #004500; } /*class for individual buttons*/ div#buttons { width:100px; height:30px; margin:3px; float:left; background-color:#F7F3B5; border-style:solid; border-width:2px; border-color:#ffffff; line-height:1.6; display:inline; } a.buttonLinks:link {color:#000000; text-decoration:none;} a.buttonLinks:active {color:#000000; text-decoration:none;} a.buttonLinks:visited {color:#000000; text-decoration:none;}
HTML Code: Original - HTML Code <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div> <div id="Main-buttons"> <a href="#" class="buttonLinks"><div id="buttons">Testing</div></a><a href="#" class="buttonLinks"><div id="buttons">Testing</div></a></div> Thanks in advance guys! Thanks for your time. Still learning design, so thanks for your help if they are easy solutions. Border Issue: In IE and FF I have a complete border on a few header div's. The bottom and top border is different color than the left and right borders. You can see that the dark brown bottom and top borders appear to lay overtop of the white left and right borders. Website is he http://onlinecasinoboss.true2formde...e.php?page=home Styling CSS is he http://onlinecasinoboss.true2formde...aster-style.css Layout CSS is he http://onlinecasinoboss.true2formde...ster-layout.css IE Layout Issue: In FF the three center content columns display how I want it to look. When you view the same home.html page in IE you can see that they don't space out how I'd like. It is most visible by compairing the boxes on the right of the center content. Thanks a ton for your time and help, I appreciate it. Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? hello, about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets? i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color... i hope i explained my issue properly... thanks for any thoughts or suggestions on this |
|||||||