|
CSS - My Browser Background Should Be The Same As Ms Windows Gray
hi, i want my browser's background to be the same as MS windows gray... how do i do that in CSS? is there a special color value? or do i have to put some code in my html to make it blend with wndows? thanks! i hope you get to help me on this one! thanks!
Similar TutorialsGood Day all, I've tried a few different hacks/fixes now to fix my PNG problem in IE6 but none seem to have any effect. I'm starting to wonder if this is fixable. Can anyone provide some insight as to what the problem could be? I seem to be ok in all browsers except IE6... 029c92a.netsolhost.com/brushes.html Best, Colin I am about to go insane.. I am a total newbie to DHTML and Javascript and I am trying to do a onmouseover event to make an image display normally as a grayscale version of itself (with filter:gray) and when the mouse moves over it I want it to switch to the full RGB color version. I tried to do a rollover with two seperate versions of the image and it worked, but for some reason IE 6 wants to load the image from the server again everytime I onmouseover or onmouseout. This is very slow, especially on my server. I just want to change the image with DHTML filters.. General pseudocode: <img src="blah.jpg" style="filter:gray" onMouseOver="style='filter:none'" onMouseOut="style='filter:gray'"> Can anybody help me? PLEASE???!?!? Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away. The images are not links. I have basically covered every option in CSS to eliminate the problem with no prevail my CSS: Code: body img{ padding: 0; border:none; -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 #000; -moz-box-shadow: 0 0 0 #000; text-decoration: none; outline:none; overflow: hidden; }
Hopefully someone has encountered this before or has some information to help? Hello, For some reason I'm having difficulty with this, I'm designing a page that needs a background image centered even when the browser is resized like on ask.com. I don't need several different background options, just one background. It seems to me it should be simple enough but I'm having one of those nights. Can anyone point me in the right direction? Thanks, Jasontor Isnt it annoying when you have created a fantastic design with unordered list menus, its looks very fantastic then you open it up on someone elses browser and the design breaks because they have increased/descreased the text size through the browser. One alternative to this is to use text sizes that prevent modifying the text size through browser. However, this doesnt FIX the problem, it only prevents it which means old lady wont be able to read your site. My main problem is the fact that I have background images and when I increase text size, the text increases, but the background images to steatch with the content. Anyway to fix this? i really like the fieldset due to having the title in the middle of the border, but are there any cross-browser issues? also what i'm finding is that if i set background styling. IE sets the background colour to include the legend aswell, whereas Firefox sets the background colour to the confines of the border. Ideas welcome and asked for Effective Alternatives also welcomed Is there any way to force a background color to print in all browsers or at least IE & FF? In the past I have just used an actual image; instead of a background color, but I was wondering if there was a 100% sure way to do this. I tried using media="print" and !import - neither of these worked. So if there is a will, place let me know the way. Hi, I am using Dreamewaver CS4 and i noticed that when i view my page in live view or in the browser my background image doesnt show up. It does however in the split code/design view. Any help? Here is my Page Code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #96D0FF;
}
.thrColAbsHdr #container {
position: relative; /* adding position: relative allows you to position the two sidebars relative to this container */
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: center; /* this overrides the text-align: center on the body element. */
font-size: 11pt;
}
/* Tips for absolutely positioned sidebars with header and footer:
1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side column if you are sure the middle #mainContent div will always contain the most content. If either sidebar were to contain more content, that sidebar would run over the bottom of the parent div, and in this case the footer as well, and the sidebar would not appear to be contained.
3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the document.
4. If the source order is changed, the top value should be equal to the height of the header since this will cause the columns to visually meet the header.
*/
.thrColAbsHdr #header {
height: 60px; /* if you're changing the source order of the columns, you'll may want to use a height on the header so that you can give the columns a predictable top value */
background: #DDDDDD;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.thrColAbsHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.thrColAbsHdr #sidebar1 {
position: absolute;
top: 267px;
left: 3px;
width: 150px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
background-color: #fff;
}
.thrColAbsHdr #sidebar2 {
position: absolute;
top: 267px;
right: 3px;
width: 160px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
background-color: #fff;
}
.thrColAbsHdr #mainContent {
margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. */
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.thrColAbsHdr #footer {
padding: 0 10px 0 20px;
background-color: #CCC;
}
.thrColAbsHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColAbsHdr #sidebar1 { width: 180px; }
.thrColAbsHdr #sidebar2 { width: 190px; }
</style>
<![endif]--></head>
<body class="thrColAbsHdr">
<div id="container">
<p><img src="Images/Header Home.png" width="509" height="144" align="absmiddle" /><img src="Images/www.yoursouthlandsmile.png" width="163" height="52" /></p>
<p><img src="Images/Links.png" width="780" height="38" /></p>
<div id="sidebar1">
<h3>
<!-- end #sidebar1 -->
Meet The Doctors:</h3>
<p> <img src="Images/Dr. J.png" alt="" width="83" height="95" align="absmiddle" /></p>
<p>Dr. J. Chris Harvan </p>
<p><img src="Images/Dr.png" alt="" width="82" height="93" align="absmiddle" /></p>
<p>Dr. Kristina Harven</p>
<!-- end #sidebar2 -->
</div>
<div id="sidebar2">
<p> </p>
<p><img src="Images/Invisalign.png" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p><img src="Images/Invisalign.png" alt="" width="141" height="46" /></p>
<p> </p>
</div>
<div id="mainContent">
<h1> Your Dental Health Is Our Priority</h1>
<p>
<p><img src="Images/DO2.png" width="119" height="119" align="left" />Welcome to Southland Smiles. Your oral health is our highest priority, and we strive to help our patients experience a positive health change and maintain that change for the rest of their lives. </p>
<p><br />
<marquee><img src="Images/Marquee/imgres-1.jpeg" height="119" /><img src="Images/Marquee/imgres-2.jpeg" height="119" /><img src="Images/Marquee/imgres-3.jpeg" height="119" /><img src="Images/Marquee/imgres-4.jpeg" height="119" /><img src="Images/Marquee/imgres-5.jpeg" height="119" /><img src="Images/Marquee/imgres-6.jpeg" height="119" /><img src="Images/Marquee/imgres.jpeg" height="119" /></p>
<p>
<!-- end #mainContent -->
</div>
</p>
<p> </p>
<p> </p>
<div id="footer">
<p> <img src="Images/296268493113.png" width="29" height="29" align="absmiddle" /> | 25521 East Smoky Hill Road, Suite 140, Aurora, CO 80016 </p>
<div><a href="mailto:info@yoursouthlandsmile.com">info@yoursouthlandsmile.com</a></div>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
And here is the code for the style sheet that defines the background: Code:
body {background-image: url(images/background.png);
background-repeat: repeat-y;
background-position: center;
background-color: #f7f4ee;}
My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out. That being said I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes (I know I can post my url here, how can I redirect you guys to veiw my site??) /********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/ Quote: /* general */ body {background: url((MyBGJPEGforbackground)); margin:0px;} body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;} a, a:link, a:visited {color:white; text-decoration:none;} a:hover {color:#ff0000; text-decoration:underline;} .pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;} .infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */ .infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;} /* main containers */ .mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;} .mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */ /* left navigation */ .navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navigation a:link, .navigation a:visited {color:#999999;} .navigation a:hover {color:#ffffff;} .navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;} /* general elements */ .headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;} .headlineBig {font-size:22px; font-weight:normal;} .headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */ .headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;} .headlineSuppl a:hover {color:black; text-decoration:underline;} .pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */ .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#ff0000; text-decoration:underline;} .listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} /* general color and font assets */ .color_supplemental {color:#666666;} /* used e.g. for song pages comments count */ .alternateBG0 {background:none;} /* used as background colors for comments */ .alternateBG1 {background:none;} /* alternate color */ /* main page (the default entry page) */ .mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */ .mainContent .contText {clear:left; padding-left:15px;} .mainContent .contInterview {clear:left; padding-left:30px;} .mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;} /* main page: video box (different from video page) */ .videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;} .videoBox_mainPage .video {padding:5px; margin-bottom:10px;} .videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;} .videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;} .videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;} .videoBox_mainPage .info {padding-left:120px;} .videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;} .videoBox_mainPage a:hover {text-decoration:underline;} /* main page: upcoming shows */ .liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;} .liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;} .liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;} .liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;} /* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */ .playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;} .playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;} .playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;} .playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;} .playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;} /* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */ .embeddedPlayer {margin:1px auto; width:750px;} /* main page: tabbed content headers (fans,stations) */ .tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; } .tabbedCont_header li a:hover {color:white;} .tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;} /* main page: fans, stations (tabbed content) */ .fansBox {padding:30px 20px 20px 20px; clear:both;} .fansBox a:link, .fansBox a:visited {} .fansBox a:hover {} .fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; } .fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;} .fancount a:hover {color:#E6E6E6; text-decoration:none;} .fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;} .fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;} .fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;} .fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;} .stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;} .stationPicBox {float:left;} .stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden} .stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;} .stationsText {color:#999999; height:80px; overflow:hidden;} .stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;} .stationlink a:hover {color:#ff0000; text-decoration:underline;} /* music page */ .songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox a:link, .songsBox a:visited {text-decoration:none;} .songsBox a:hover {text-decoration:underline;} a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;} a.songtitle:hover {color:#ff0000; text-decoration:underline;} .songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */ .songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;} /* comments page */ .commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;} .commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;} .commentsBox a:link, .commentsBox a:visited {text-decoration:none;} .commentsBox a:hover {text-decoration:underline;} .commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;} .commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;} .commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */ .commentsBox .postdate a:hover {text-decoration:underline;} .commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;} .commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;} .commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;} .ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */ .commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;} .commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;} /* video page */ .videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;} .videoBox .video {padding:20px; margin-bottom:10px;} .videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;} .videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;} .videoBox .info {float:left; width:440px;} .videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;} .videoBox a:hover {color:red; text-decoration:underline;} .videoListBox {border-top:#4b4b4b dashed 1px;} /* photo pages */ .photopage {background:black;} .selectedPhoto_box {text-align:center;} .selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;} .photolist {padding:10px 0px 0px 30px;} .photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox .photo {height:150px; width:118px; overflow:hidden;} .photobox .photoComment {color:#444444; font-size:11px;} .photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox_on .photo {height:150px; width:118px; overflow:hidden;} .photobox_on .photoComment {color:#999999; font-size:11px;} /* reviews page */ .reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;} .reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;} .reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;} .reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;} /* licensing page */ .licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;} .licenses {margin-top:70px;} .licenses .headline {font-size:14px;} .lic_tableSongs {border:none;} .lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;} .lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;} /* widgets page */ .widgetMargin { padding:8px 0px 8px 35px;} .widgetSpacer {width:100; height:15px; clear:both;} /* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. In CSS is there a way of changing the colours of a window, such as the title bar or something. Also I've seen the scrollbars with different colours. I was wondering how you do that? I think it's CSS but if I'm wrong can someone tell me. Thanks Sephers hi, i'm a CSS newbie still sorting out all of the browser issues, hacks, box problems and general confusion (hmmm, and you wonder why i've waited so long to learn CSS?). I don't have IE 5.x to check my first effort with & was hoping someone on this forum could take a quick look & see if it matches the screen shot i've linked to below. btw - does anyone here know if it's possible to have two versions of IE installed on the sample PC? I currently have IE6 installed & couldn't find any useful info on Microsoft's web site (i apologize for the ? but i'm a mac user and delving into windows makes me, well, shudder a bit). Test Page Screen Shot of Correctly Displayed Page my brain on CSS I have created my first css site. I got it to work on the mac and pc, firefox and ie. So, naturally I moved on and created the inside pages to the site. I made the first inside page, and it worked as well....I really only copy and pasted the code I knew worked. I am using dreamweaver, so I set up templates and made the other pages. All I've done is copy and paste. But the inside pages get messed up and not in a consistent way. If I never changed a thing to the code, why is this happeneing? Is there any known bug/fix to this? Thanks www.rookscommunications.com/inrs/ Hey guys, sorry if I'm asking something that's been addressed before, but just couldn't find an answer anywhere, and thought one of you genii might be able to help.... Anyway, I'm tackling my first CSS layout, and it's going pretty well so far. Cross-browser testing hasn't gone nearly as bad as I expected. asiabackpacker.com/ai-resource/ But there's one problem I just can't figure out. Here's a screenshot: asiabackpacker.com/ai-resource/images/14015507.jpg In Internet Explorer 6 on Windows XP, my header Div appears one pixel to the left. It looks fine on IE6 on any other OS, and even in IE 7 on Windows XP, but for some reason the IE6 + Windows XP combo is producing this weird result. Is this a known bug that anyone's aware of, and is there any solution? (btw, the forum rules made me strip the http's out of my urls....sorry bout that) My webpage I posted this awhile back but it was lost in the wrong forum. anyways i need a little help with figuring out why windows displays margins and overall layout incorrectly and/or just differently. I test everything on mozilla, safari, and internet explorer 5.2 on my Apple G4 tower at home. When i typed in my webpage on a windows there were several problems throughout my site. the biggest things are the blank space off to the right of the vertical navigation menu and the middle footer's blue background is 5px short on the sides. the other thing is especially noticed in my picture galleries -- the DIV that the thumbnails are in creeps up to overlap the text, where on my mac that isn't what's displayed. is there an error in my css that is making this happen? the code is technically correct, but maybe there's a better way for coding a few things. Thanks, Amory OK basically this css code is causing problems in IE.5 OS/9 on the mac I was wondering if the Windows version caused the same problems when rendering these css buttons: #elButton a { color: white; font-size:10px; font-family:verdana; font-weight:bold; text-align:center; text-decoration: none; border:3px outset #99ccff; background-color: #3399ff; display: block; margin: 1px; width: auto; height: 2.5 em; padding: 3px 5px 0; } #elButton a:hover { background-color: #D43D2A; color:#ffffff; padding-left:5px; border:3px inset #ffffff; } ============================================== html code: <DIV id="elButton"> <DIV><A href="#" onclick="img(1)">Next</A></DIV> <DIV><A href="#" onclick="img(-1)">Prev</A></DIV> </DIV> THANKS GUYS !! 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 CSS Code: Original - CSS Code #leftSide { position: absolute; height: 100%; width: 155px; top: 0px; left: 0px; background-image: url("../Images/SideImages/left.gif"); background-repeat: repeat-y; z-index: 0; } #rightSide { position: absolute; height: 100%; width: 115px; top: 0px; right: 0px; background-image: url("../Images/SideImages/right.gif"); background-repeat: repeat-y; z-index: 0; }
In EVERY OTHER BROSWER, that code makes a background repeat. No how in the world do I make IE repeat my background. Is the background-repeat: repeat-y; making the difference? I hate IE. |
|||||||