|
CSS - Cant Get It To Work In Ie8, Please Help
Im not good at all with CSS and need some help getting this to work in IE8 or older/newer versions. Works great in Firefox though.
<div style="width:90%;height:150px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;border:4px solid #F4F4F4;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 15px 15px 15px;-moz-box-shadow: #B3B3B3 15px 15px 15px; box-shadow: #B3B3B3 15px 15px 15px; padding-top:2%; padding-left:2%;"> Any help making this work in IE8 would be great. Similar TutorialsI'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple: PHP Code: h3 { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } p { margin:10px; color:#636500; font-family: Arial, Helvetica, sans-serif; font-style: normal; } a { text-decoration: none; } a:hover { color:#636500; } a:visited { color:#cecf9c; } a:link { color:#cecf9c; } searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore. I think it may be affected by the a:visited style, but how do I make a:hover work all the time? Thanks for helping. Well my fiance and I are starting a website for our photography and I designed what I wanted the layout to look like using Adobe Photoshop however now it's become a headache to get it to work. i18.photobucket.com/albums/b117/Nagoshiffxi/help.jpg this is what we want it to look like pretty much centered on a black background, each of those navigation images being individual pictures... the background being the box with the 3 images floating over it... At the moment I have part of it working he www. pollard-exposures.com/v1/ If someone can view the source and tell me a better way to make it work and how I may be able to add in the individual navigation pictures along the left side like I have it in the picture I would really really appreciate it... I am not sure how to even begin... Hi Guys, I have a pretty specific page here, work fantastically in Firefox, but not in IE6/7 (or Safari/Opera etc ). Any ideas?! Thanks! (URL address blocked: See forum rules) Darren. Hi all Another stupid annoyance relating Internet Explorer: it seems IE6 does not recognize the following CSS selector rule: tag#id.class e.g. div#content.active One has to split it into div#content .active Is that right? Do we just have to live with this? Greetings, Josh I followed the instructions he http://www.meyerweb.com/eric/css/edge/popups/demo.html but they "only" work in mozilla, konqueror, opera... http://new.lfcompany.com/design.php what gives? hey there... so im having problems placing a div over a div using z-index but in order to explain that i need to explain whats in the div itself. to put it in a nutshell im trying to make images change when i hover over them and use them as links, but to do this however (or at least everywhere ive looked) this would require me to change the actual tables and coding itself for the other divs i have already made (if that didnt make sense im sorry youll have to bear with me cuz im relatively new at this) so to do this and make a separate navigation bar on top of my banner div i made another div to be placed over that, i assumed you could just make the navigation div rest on top of the banner div using z index but when i type it into the code and hit submit i get ".." when i try to figure out whats wrong the next time i look at the code. the myspace page is here myspace.com/mikeyeffinpowelltest and the place where i want to put the nav bar is in between the 2 brown lines just above the music player this is for a myspace band page. where the problems occur are as fallows. Code: div.navigation {position: absolute; ..; top: 0; left: 50%; margin-top:1000px; margin-left: -428px; width 860px; height: 43px;}
the whole code for the profile is he i know its long but please take a look Code: <style> body table {margin-top:918px;} body td table, body div table {margin-top: 0;} div.topbanner {position: absolute; top: 0; left: 50%; margin-top:0px; margin-left: -428px; width: 860px; height:1125px;} div.navigation {position: absolute; top: 0; left: 50%; margin-top:1000px; margin-left: -428px; width 860px; height: 43px;} div.sidebar {position: absolute; top: 0; left: 50%; margin-top:1125px; margin-left: -398px; width: 340px; height:243px;} div.upcomingshows {position: absolute; top: 0; left: 50%; margin-top:1490px; margin-left: -7px; width: 320px; height:56px;} .contactTable {display: none;}.orangetext15{ display:none; visibility:hidden;} table, tr, td { background-color:transparent; border:none; border-width:0;} body { background-color:000000; background-image: url(http://img262.imageshack.us/img262/3389/braverbackground.png); background-attachment: fixed; background-position:center; background-repeat:no-repeat; } table, tr, td, li, p, div { font-family:arial; color:6a583a; font-size:10px; } .btext { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .blacktext10 { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .whitetext12 {color: 6a583a; background-color: 000000; background-image:; font-size: 12px; margin: 0px 0px 0px 0px; padding: 13px 10px 10px 10px; text-align: center; display: block; text-transform: uppercase; font-family: Helvetica, Arial; font-weight: bold;} .blacktext12 {color: 6a583a; font-size: 12px; background-color: 000000; font-family: Helvetica, Arial, sans-serif; font-weight: normal; display: block; margin-top: 14px; text-transform: uppercase;} .lightbluetext8 { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .orangetext15 { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .redtext { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .redbtext { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } .text { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } a:active, a:visited, a:link { font-family:arial; color:6a583a; font-size:10px; font-weight:bold; } a:hover { font-family:arial; color:6a583a; font-size:10px; } a.navbar:active, a.navbar:visited, a.navbar:link { color:6a583a; } a.navbar:hover { font-family:arial; color:6a583a; font-size:10px; } a.redlink:active, a.redlink:visited, a.redlink:link { font-family:arial; color:6a583a; font-size:12px; font-weight:bold; } a.redlink:hover { font-family:arial; color:6a583a; font-size:10px; } .nametext { background:;background-repeat:no-repeat; background-position:bottom; display:block; width:300px; height:124px; font-family:helvetica,arial; color: ; font-size:-0px; } div table tr td font {visibility:hidden;} div table table tr td font {visibility:visible;} tr {background:transparent;} body table div font a, body table div div {visbility:hidden;} body table table div font a, body table table div div {visibility:visible;} html body.bodyContent table tbody tr td table.friendsComments{ width: 770px !important; margin: 0 !important; padding: 0 !important; margin-top: 20px !important; overflow: hidden !important; background-color: transparent !important; margin-left: -1px !important; _width: 770px !important; _margin-left: -2px !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table{ width: 100% !important; border-collapse: separate !important; border-spacing: 0px 0px !important; background-color: transparent !important; height: auto !important; } table.friendsComments tbody tr td.text table tbody tr td{ background-color: transparent !important; height: auto !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b{ display: block; position: absolute; z-index: 9; width: 758px; height: 15px; line-height: 15px; overflow: hidden; margin: -48px 0 0 8px; text-align: right; padding-right: 12px !important; color: ; font-weight: normal; font-size: 12px; _margin: -53px 0 0 8px; _font-size: 11px !important; _color: 333333; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b span.redtext{ font-weight: bold; color: e2f6a6; padding: 0px 2px; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b a{ color: FFFFFF !important; font-size: 10px !important; text-transform: Uppercase; margin: 0 -7px 0 -8px !important; padding: 0 9px 0 9px !important; background-color: !important; position: relative !important; display: inline !important; z-index: 9; border: none !important; letter-spacing: 0px !important; _font-size: 11px !important; _margin: 0 !important; _padding: 0 !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td{ background-color: !important; background-image:; text-align: left; vertical-align: top; overflow: hidden !important; font-size: 10px !important; line-height: 12px !important; text-transform: none !important; letter-spacing: 0px; color: FFFFFF !important; margin: 0 !important; padding: 12px 0px 12px 0px; border-bottom: 1px dotted !important; border-color: 222222 !important; _line-height: 16px !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td span.blacktext10{ color: !important; text-transform: Uppercase !important; margin: 0px !important; padding: 0px important; display: block !important; font-size: 9px; font-family: verdana !important; font-weight: normal; letter-spacing: 1px; text-align: right; margin: 12px 12px -15px 0px !important; width: 622px; border-top: 1px solid black; _margin: 12px 0px -.5em 0px !important; _width: 634px; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a{ display: block !important; color: !important; margin: 0px !important; padding: 12px 12px 0px 12px !important; text-transform: none !important; margin-bottom: -15px !important; font-size: 10px !important; line-height: 11px !important; border: none !important; letter-spacing: 0px !important; text-align: center !important; width: 110px !important; overflow: hidden !important; font-weight: normal; _width: 124px !important; _margin-bottom: -15px !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a img{ visibility: visible !important; border: 1px solid dimgrey !important; border-color: !important; padding: 0px !important; margin: 0px !important; margin-top: -12px !important; width: auto !important; _margin-left: -4px; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img.ImgOnlineNow{ display: block; position: relative; margin: 15px 0 -20px 26px !important; border: none !important; _margin: 15px 0 -20px 21px !important; } html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img{ max-width: 100%; margin: 0px !important; margin: 0px 0px 12px 0px !important; } </style> <div class="topbanner"> <img src="http://img683.imageshack.us/img683/259/bannerbraver.png" border="0" /></a></div> <div class="navigation"> <style> a.youtubelink { width: 108px; background: url(http://img24.imageshack.us/img24/4421/youtubelink.png) top left no-repeat; } a.youtubelink:hover { background: url(http://img9.imageshack.us/img9/5259/youtubelinkhover.png) top left no-repeat; } a.facebooklink { width: 122px; background: url(http://img693.imageshack.us/img693/6725/facebooklinkt.png) top left no-repeat; } a.facebooklink:hover { background: url(http://img24.imageshack.us/img24/4872/facebooklinkhover.png) top left no-repeat; } a.twitterlink { width: 121px; background: url(http://img9.imageshack.us/img9/6989/twitterlinkq.png) top left no-repeat; } a.twitterlink:hover { background: url(http://img693.imageshack.us/img693/357/twitterlinkhover.png) top left no-repeat; } a.purevolumelink { width: 162px; background: url(http://img24.imageshack.us/img24/7692/purevolumelinko.png) top left no-repeat; } a.purevolumelink:hover { background: url(http://img24.imageshack.us/img24/175/purevolumelinkhover.png) top left no-repeat; } a.buzznetlink { width: 171px; background: urlhttp://img697.imageshack.us/img697/9417/buzznetlink.png) top left no-repeat; } a.buzznetlink:hover { background: url(http://img24.imageshack.us/img24/484/buzznetlinkhover.png) top left no-repeat; } </style> <img src="http://img691.imageshack.us/img691/1678/spacer1.png" /> <a href="http://www.msplinks.com/MDFodHRwOi8veW91dHViZS5jb20=" class="youtubelink"> <a href="http://www.msplinks.com/MDFodHRwOi8vZmFjZWJvb2suY29t" class="facebooklink"> <a href="http://www.msplinks.com/MDFodHRwOi8vdHdpdHRlci5jb20=" class="twitterlink"> <a href="http://www.msplinks.com/MDFodHRwOi8vcHVyZXZvbHVtZS5jb20=" class="purevolumelink"> <a href="http://www.msplinks.com/MDFodHRwOi8vYnV6em5ldC5jb20=" class="buzznetlink"> <img src="http://img268.imageshack.us/img268/3645/spacer2.png" /> </div> <div class="sidebar"><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=68142598"><img src="http://img94.imageshack.us/img94/6189/minipic.png" border="0" /><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=68142598"><img src="http://img22.imageshack.us/img22/1886/viewpictures.png" border="0" /><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZVYyJmZyaWVuZElE PTY4MTQyNTk4Jk15VG9rZW49MTkzZGMzMDYtMDRiOC00ZjExLTljNWItYmFhNmM5NmY2Nzc2"><img src="http://img694.imageshack.us/img694/1944/contacttheband.png" border="0" /><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD02ODE0MjU5OA=="><img src="http://img693.imageshack.us/img693/181/addtofriends.png" border="0" /><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuZm9yd2FyZFYyJmZyaWVuZElE PTY4MTQyNTk4JmY9Zm9yd2FyZHByb2ZpbGU="><img src="http://img262.imageshack.us/img262/1180/addtogroup.png" border="0" /><a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZWVkaXQubXlzcGFjZS5jb20vaW5kZXguY2ZtP2Z1c2VhY3Rpb249dXNlci5hZGRUb0Zhdm9yaXRlJmZy aWVuZElEPTY4MTQyNTk4JnB1YmxpYz0w"><img src="http://img267.imageshack.us/img267/5912/addtofavs.png" border="0" /><a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTY4MTQyNTk4Jk15VG9rZW49MTkzZGMzMDYt MDRiOC00ZjExLTljNWItYmFhNmM5NmY2Nzc2"><img src="http://img40.imageshack.us/img40/9331/leavecommento.png" border="0" /><a><img src="http://img63.imageshack.us/img63/2866/memberssection.png" border="0" /></a></div> <div class="upcomingshows"><img src="http://img707.imageshack.us/img707/8907/upcomingshows.png" border="0" /></div> <center> <img src="http://img24.imageshack.us/img24/677/abouttheband.png" /><br /> BRAVER is a five piece metalcore band from Rancho Cucamonga out to make a name for themselves in the Inland Empire music scene. With fast relentless riffs, heavy breakdowns, melodic chorus's, and powerfull growls along with explosive stage performance, BRAVER is sure to be a band and experiance you will NEVER forget. <img src="http://img31.imageshack.us/img31/6683/bandnews.png" /> <style> div.myspace-scrollbox {height:300;width:425;background-color:000000;font-family:Arial;font-size:8pt;color:FFFFFF;text-align:left;border-width:1;border-style:solid;border-color:6a583a;overflow-y: scroll !important; overflow-x: none !important;} </style> <div class="myspace-scrollbox"> APRIL 24, 2009<br /> <br /> HEY EVERYONE!!! look at it and take it all in!<br /> Thats right everyone! new layout and a new song! and might we say it looks quite amazing! So we got alot more big news coming your way too, along with more shows, merch store, and a bunch of other stuff that should be popping off REALLY soon. So with that being said we from BRAVER would all like to take this opportunity to thank everyone who stuck for us during the LOOOOONG wait, so thank you all very much. You guys are what makes this happen and without you we would be nothing. So please sit back and enjoy the new layout and the new song!<br /><br /> -BRAVER </div><p style="font-family:verdana,arial,sans-serif;font-size:10px;"> <img src="http://img31.imageshack.us/img31/4323/videosiy.png" border="0" /></center> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="344" width="425"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/Kh1r-jFNMcY&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/Kh1r-jFNMcY&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" height="344" width="425" wmode="transparent" /> </object> <br /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="344" width="425"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/H7fOK0rU0yI&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/H7fOK0rU0yI&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" height="344" width="425" wmode="transparent" /> </object> <br /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="344" width="425"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.youtube.com/v/4AsM83MquwM&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" /> <param name="wmode" value="transparent" /> <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/4AsM83MquwM&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" height="344" width="425" wmode="transparent" /> </object> <center> <img src="http://img51.imageshack.us/img51/5927/supportus.png" /><br /> <img src="http://img51.imageshack.us/img51/5662/merchx.png" /><br /> ALL MERCH IS AVAILABLE AT BRAVER SHOWS!!<br /> ONLINE MERCH STORE COMING SOON!!<br /><br /> <img src="http://img2.imageshack.us/img2/332/skullshirt.png" /><br /> BRAVER SKULL T (skull print on front)<br /> AVAILABLE IN:<br /><br /> youth large<br /> small<br /> medium<br /> large<br /> xlarge<br /> xxlarge<br /><br /> ONLY 10$!!<br /> <img src="http://img11.imageshack.us/img11/8876/chantshirt.png" /><br /> CHANT T (BRAVER print on front, chant print on back)<br /> ALSO AVAILABLE IN BLACK FONT ON WHITE!!<br /> AVAILABLE IN:<br /><br /> youth large<br /> small<br /> medium<br /> large<br /> xlarge<br /> xxlarge<br /><br /> ONLY 10$!!<br /> </center> </center> <br /> <br /> <br />
I'm trying to get my buttons to rollover using a single image and change the background position on a:hover... and I'm having a bitch of a time figuring out why they're not working. I'm building them almost exactly how I always do, but I can't for the life of me see what's going wrong here. Hoping somebody can take a peek at my code and tell me what I did wrong here... http://www.crackin.com/dev/index.html 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Melt Away Massage</title>
<style type="text/css">
<!--
body,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #000;}
body {margin: 0px; background: url(images/pageBg.jpg) no-repeat center top fixed #fff;}
img {margin:0px; padding:0px; border:none;}
.float img, .float div {float:left;}
.clear {clear:both; height:0px;}
#nav1 div {width:223px; height:98px; margin:0 0 13px 10px;}
#nav1 a {display:block; width:100%; height:100%; background-position:left;}
#nav1 a:hover {background-position:right;}
#nav2 div {width:161px; height:34px; position:relative; top:-12px;}
#nav2 img {position:relative; top:-12px;}
#nav2 a {display:block; width:100%; height:100%; background-position:top;}
#nav2 a:hover {background-position:bottom;}
#content_frame {position:relative; top:-12px; margin:0px; padding:0px; height:100%; width:100%; background:url(images/index_bodyBgStretch.jpg) repeat-y;}
#content_subFrame {margin:0px; padding:0px; height:100%; width:100%; background:url(images/index_bodyBgTop.jpg) no-repeat top;}
#footer_wrap {width:100%; height:140px; background:url(images/foot_bg.png) repeat-x; position:relative; margin-top:-133px;}
#footer {min-height:121px; min-width:955px;}
#footer div {position:relative; z-index:10; padding:60px 60px 0;}
-->
</style>
</head>
<body>
<div id="wrapper" style="width:100%;">
<div style="position:absolute; width:100%; height:33px; top:175px; background:#fff;"></div> <!-- SUB TITLE STRIPE -->
<div id="content_wrap" style="width:955px; margin:0 auto;">
<!-- SEARCH BAR -->
<span class="float">
<form style="position:absolute;">
<a href="#"><img src="images/index_01.png" width="129" height="32" /></a>
<div style="width:394px; height:32px; background:#fff;">
<input name="search" type="text" style="margin-top:7px;" /> INSERT DATE CODE
</div>
</form>
<span style="float:right;">
<img src="images/index_02.png" width="432" height="32" />
</span>
</span> <!-- END FLOAT -->
<div class="clear"></div>
<!-- END SEARCH BAR -->
<img src="images/index_03.png" width="955" height="143" /><br /> <!-- MAIN TITLE -->
<img src="images/index_04.png" style="position:relative; left:373px;" /><br /> <!-- SUB TITLE -->
<!-- REDUCED WIDTH CONTENT WRAP -->
<div id="sub-content_wrap" style="width:936px; margin:0 auto;">
<span class="float">
<div style="background:url(images/index_MainImg.jpg); width:703px; height:321px;"></div>
<span id="nav1">
<div><a href="#" style="background:url(images/nav_1services.jpg);"></a></div>
<div><a href="#" style="background:url(images/nav_2rates.jpg);"></a></div>
<div><a href="#" style="background:url(images/nav_3book.jpg);"></a></div>
</span> <!-- END NAV1 -->
<span id="nav2">
<img src="images/index_05.png" />
<div style="width:160px;"><a href="#" style="background:url(images/nav_4new.jpg);"></a></div>
<div><a href="#" style="background:url(images/nav_5specials.jpg);"></a></div>
<div><a href="#" style="background:url(images/nav_6about.jpg);"></a></div>
<div><a href="#" style="background:url(images/nav_7contact.jpg);"></a></div>
<img src="images/index_06.png" />
</span> <!-- END NAV2 -->
</span> <!-- END FLOAT -->
<div class="clear"></div>
<!-- MAIN CONTENT FRAME -->
<div id="content_frame">
<div id="content_subFrame">
<div style="padding:10px; min-height:300px;">
INSERT CONTENT HERE
</div>
</div>
</div>
<!-- END MAIN CONTENT FRAME -->
</div> <!-- END SUB-CONTENT_WRAP -->
<!-- END REDUCED WIDTH CONTENT WRAP -->
</div> <!-- END CONTENT_WRAP -->
<div style="background:url(images/foot_bgMid.jpg); width:955px; height:121px; margin:0 auto; position:relative; top:-12px; z-index:5;"></div> <!-- BODY BASE -->
<div id="footer_wrap">
<div id="footer">
<div style="float:left;">
FOOTER CONTENT GOES HERE
</div>
<div style="float:right;">
FOOTER CONTENT GOES HERE
</div>
</div> <!-- END FOOTER -->
</div> <!-- END FOOTER_WRAP -->
</div> <!-- END WRAPPER -->
</body>
</html>
Hi, I'm new to CSS. I'm currently reading McFarland's "The Missing Manual," and I'm about 1/4 through. But it seems that no matter how hard I try to understand this problem, I can't get it. I'm trying to figure out how to set my heading links to look one way and all other links on the page to keep from inheriting the layout for those heading links. Here are the styles I'm using: a:link, a:visited { color:#5f4731; border:none; } .contentpagetitle a:link, a:visited, a:hover, a:active { color: #00477d; font-size: 150%; border-bottom: 1px solid #f4f4f4; font-weight: bold; text-transform: none; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times; padding-bottom: 3px; text-decoration: none; } Here is a little piece of test html I'm using until I can figure this out: Code: <body> <!-- This is the heading link --> <a class="contentpagetitle" href="http://www.midsouthcc.org" target="_blank">Test Article</a> <!-- This is a paragraph that follows the heading link --> <p>Lorem ipsum cum ut viris gubergren conceptam.<a href="http://adinasnotes.blogspot.com" target="_blank">Adina's Notes</a>. Ferri electram at ius.</p> </body> Can someone tell me why the second link inherits the settings for the first link which is set to class=contentpagetitle? I'm missing something and I'm sure it's a simple answer, but your help would be greatly appreciated. Thanks, gsw I have the following coding <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>CSS Sample Page</title></head> <body> <table style="width: 765px; height: 426px;"> </table><div style="text-align: center;"><!-- First Row contains banner and tagline--></div><table style="width: 765px; height: 426px;"> <tbody> <tr> <td style="text-align: center;" width="50%"><font size="7">Web News</font></td> <!-- spacer cell --> <td> </td> <td style="font-weight: bold; text-align: left;">"The latest in up-to-the-minute Web news,discussion, techniques, and <br>trends"</td> </tr> <!-- Second Row contains headline--> <tr> <td colspan="3"> <h1 align="center"><br></h1><h1 align="center">Web Developers Embrace CSS</h1> </td> </tr> <!-- Third Row contains sub-head --> <tr style="font-family: Helvetica,Arial,sans-serif;"> <td colspan="3"><h2 style="text-align: center;">Simple syntax, powerful design tool</h2> </td> </tr> <!-- Fourth row contains article columns --> <tr valign="top"> <td> <p class="copy"><span style="font-variant: small-caps;"> Cascading Style Sheets (CSS)</span> is a style language for the web. It uses common printing and display terminology to allow HTML and XML authors control over the way web pages look.</p> <p>Although designed in 1996, CSS is just now becoming a useable style language because of a lack of support from the major browsers. IE 5.5 for the Macintosh, released in 1999, is the first browser to completely support the CSS1 specification. Support varies across browsers, but both Netscape 6 and IE 5 for the Windows platforms offer more complete (but still not perfect) CSS support.</p> </td> <!-- Spacer cell --><td> </td> <td> <p> Style sheets accomplish the separation of content and style that is integral to the open nature of data on the web. Currently, web page code mixes both document structure information and browser-based display properties, limiting the cross-platform compatibility of the content.</p> <p>With style sheets, the display properties are separate from the content. This accommodates the diverse variety of devices that are becoming available to browse the web. Whether you come to a web site with a Palm Pilot, PCS phone, or Windows CE device, the server can supply a style sheet that matches your display device. CSS2 supports a variety of media devices, including print, that allows content providers to single-source their data.</p> </td> </tr> </tbody> </table> </body></html> all works so far but the problem I am having is adding specific div tags to the H2 elements. DIV class="subhead"> Simple syntax,powerful @Code in Nl 2nd:design tool</DIV> if i try to add this style rule i get the above text show up in the browser and it wont align centrally. also the cascading style sheets wont show up as small caps. can anyone help me Im sorry to ask here but know of nowhere else to ask, can someone please advice me or forward me to somewhere that can help please? thanks (please note, i'm a noob).. What i have right now: ################ HTML: ################ <div id="aboutusimage"></div> ################ CSS: ################ #aboutusimage { width:400px; height:75px; background-image:url(/images/about.jpg); position:relative; left:189px; top: 4px; margin-bottom:30px; } ======================== What i'd like to have: ################ HTML: ################ <div id="banner" class="about"></div> ################ CSS: ################ #banner { width:400px; height:75px; position:relative; left:189px; top: 4px; margin-bottom:30px; } #banner.about { background-image:url(/images/about.jpg); } ====================== For some reason, the image disapears when i do this :\ Any advice? Sorry....wrong info here....been up too long. I'll regroup and repost this with hthe correct info. Hello, I'm having a problem using opacity in IE. My opacity works fine in Mozilla but it doesn't want to work in IE. I don't think that it is my css code: Code: .ui-slider-disabled .ui-slider-handle { opacity: 0.5; filter: alpha(opacity=50); }
7.ui-slider-range { position: absolute; background: #fcff00; opacity: 0.3; filter: alpha(opacity=30); width: 100%; height: 100%; }
Can anyone help me? My website page: http://www.demo.iadvise.be/pls/apex11g/f?p=1006:40 Thanks in advance Kind regards, Oli Hi, there. I've created a simple tableless 3-column fixed-width layout within a 'wrapper' div#. The column displays exactly how I want it and where I want it in Firefox, Safari, Chrome... but not in IE7 - for some reason, IE7 repeats part of the content of the third column. courses.algarve-golf.co.uk/index.html courses.algarve-golf.co.uk/scripts/default.css (The site isn't yet finished, so while the CSS validates, the HTML is not completely validated as I have more content, nav-bars and so on to add.) I've double and triple-checked everything I know of, but as my CSS experience is somewhat limited, I'm hopeful that this is just the result of a known IE7 that i'm not yet aware of. Any help or advice that anyone can offer greatfully appreciated! Hi I have the code below but i cant get it to work in IE, it works perfectly in mozilla but when in ie it messes up, i tried to re create it a different way but i keep having problems aligning the footer, if anyone can help or can edit it so it just works in IE and not mozilla it would be a great help as i can then do a browser check and load the apropriate stlye sheet. cheers CSS body { /*sets properties for the body of the document*/ background-color:#ffffff; margin:0px 0px 0px 0px; } #container { /*sets the properties for the container that all the elements are placed in.*/ margin-top: 50px; /*distance from top of browser window*/ margin-left: 50px; /*discance from left of browser window*/ margin-right: 50px; /*distance from right of browser window*/ margin-bottom: 50px; /*distance from bottom of browser window*/ padding: 0px; /*padding for the edges of the container*/ background-color: #66ccff; /*sets the background colour to blue*/ width: 80%; /*sets the width of the container*/ min-width: 241px; /*sets the minimum width of the container*/ } #footer { /*sets the properties of the footer container*/ padding: 0px; /*sets the padding*/ position: relative; /*sets the position so it is relative to the container its in*/ background-color: #FFFFFF; /*sets background colour to white*/ width: 100%; /*sets width to 100% of the container*/ clear:both; /*clears around the container....vital dont remove it.*/ } #content { /*sets the properties for the content*/ margin-left: 180px; /*margin from the left of the container...leaves space for leftnav*/ height: *%; /* sets height of content to fill all availble space*/ background-color: #66ccff; /* sets background colour to blue*/ align: right; /*aligns content frame to right of the container*/ min-height: 250px; /*sets the minimum height for the window...same as bg image for left nav*/ padding-left: 5px; /*sets the content padding to 5px so there is some space between txt and edge of frame*/ /*overflow:hidden; can also be set to visible this causes some silly problems*/ border-left: 2px solid; /* sets the left border.. needed so when the content stretches the border stretches with it*/ border-color: #663300; /*sets border colour to brown*/ } #leftnav { /*sets properties for the left nav bar*/ float:left; /* floats the navigation panel on the left of container*/ background-color : #66ccff; /* sets bg colour to blue*/ width: 180px; /*sets withd of the left nav*/ padding-top: 30px; /*sets padding from top of container*/ border-right: 2px solid; /*sets border so that when nav is extended border continues*/ border-color: #663300; /*sets border colour to brown*/ } #topleftspace { /*sets properties for the top left space where the rounded corner will go*/ position: absolute; /*sets positioning for element*/ background-color: #66ccff; /*sets bg colour to blue*/ width: 180px; /*sets witdh of element*/ height: 20px; /*sets height of element*/ } #toprightspace { /*sets propertiese for the top right space where the rounded corner goes.*/ margin-left: 180px; /*sets positioning for element*/ background-color: #66ccff; /*sets bg colour to blue*/ height: 20px; /*sets witdh of element*/ padding-left:5 px; /*sets height of element*/ } #topleftcorner { /*sets properties for the top left corner...where the gif goes*/ text-align: left; /*aligns the rounded corner gif*/ } #toprightcorner { /*sets properties for the top left corner...where the gif goes*/ text-align: right; /*aligns the rounded corner gif*/ } #topleftwhite { /*sets the top white space where text could possibly go*/ position: absolute; /*sets position*/ background-color: #FFFFFF; /*sets bg colour to white*/ width: 180px; /*sets width*/ height: 30px; /*sets height*/ border-right: 2px solid; /*sets border*/ border-color: #663300;/*sets border colour to brown*/ } #toprightwhite { /*sets the top white space where text could possibly go*/ margin-left: 180px; /*sets margin from the left of the page to cope with topleftwhite*/ background-color: #FFFFFF; /*sets bg colour to white*/ height:30px; /*sets height*/ padding-left:5px; /*sets padding*/ } #bottomleftspace { /*sets the space where the bottom rounded corner goes*/ position: absolute; /*sets position*/ background-color: #66ccff; /*sets colour*/ width: 180px; /*sets width*/ height :20px; /*sets height*/ border-right: 2px solid; /*sets border*/ border-color: #663300; /*sets border colour*/ } #bottomrightspace {/*sets space where rounded corner will go*/ margin-left: 180px; /*sets left margin to cope with left spaces*/ background-color: #66ccff; /*sets bg colour*/ height: 20px; /*sets height*/ padding-left: 5px; /*sets padding*/ } #bottomleftcorner { /*sets properties for the bottom corner gif*/ text-align: left; /*aligns the gif*/ } #bottomrightcorner { /*sets properties for the bottom corner gif*/ text-align: right; /*aligns the gif*/ } #bottomleftwhite { /*sets the white space for the bottom*/ position: absolute;/*sets position*/ background-color: #FFFFFF; /*sets the bg colour*/ width: 180px; /*sets width*/ height: 30px; /*sets height*/ border-right: 2px solid; /* sets border*/ border-color: #663300; /*sets border colour*/ } #bottomrightwhite {/*sets the white space for the bottom*/ margin-left: 180px; /*sets margin width to cope with left space*/ background-color: #FFFFFF; /*sets bg colour*/ height: 30px; /*sets height*/ padding-left: 5px; /*sets padding*/ } #heading1 { /* sets the main heading properties*/ font-size: 22px ; /* font size*/ font-weight: bold; /* font weight*/ color: black; /* font colour*/ } #contenttext {/*sets content text style*/ font-size: 12px; /*font size*/ color: #663300; /*font colour*/ } HTML <div id="container"> <div id="topleftwhite"></div> <div id="toprightwhite"></div> <div id="topleftspace"> <div id="topleftcorner"><img src="images/t-left-corner.gif" width="20" height="20"</div> </div> <div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"> </div> <div id="toprightspace"><div id="toprightcorner"><img src="images/t-right-corner.gif" width="20" height="20"</div></div> <div id="content"><div id="heading1">Heading 1</div><div id="contenttext"> This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go This is where the content would go </div></div> <div id="footer"> <div id="bottomleftspace"> <div id="bottomleftcorner"><img src="images/b-left-corner.gif" width="20" height="20"</div> </div> <div id="bottomrightspace"> <div id="bottomrightcorner"><img src="images/b-right-corner.gif" width="20" height="20"</div> </div> <div id="bottomleftwhite"></div> <div id="bottomrightwhite"></div> </div> Hello CSS-Trick Community, So I am helping with music careers site and I have a question. The Problem: The Content dividers "were" running the full width of the parent container, I need them to respect the elements on the right side of the page. My boss set up most of the page, but we would like the dividers to fit more appropriately (dynamic). He has since removed them for the time being, but above each blue headline should be a 'diagonal line pattern' divider that is smart enough to know how long to be (just how the text knows when to wrap). The Demo Page is at careersinmusic(dot)com/new/production-music.aspx Thanks for Reading/Helping. Hi -- I am in the process of redesigning my website with CSS. And as I was preparing to upload it and test it (looked/worked great in NVU), I found that half of my links do not work. And ... I am a new user, so I can't post links. Gah. To be more clear, I have a menu container and a "whiteboard" container I write most of my content in. All the links in the menu container work perfectly. However, in the whiteboard, it's hit and miss. Strip out the css, and they all work, so it is the css. Try as I might, I can't figure what the problem is. Part of My CSS follows: Code: #menutop {
position: absolute;
width: 247px;
height: 74px;
background: url("menutop.gif") top left;
background-repeat: no-repeat;
top: 269px;
left: 46px;
}
div#menucontainer {
position: absolute;
width: 200px;
height:1080;
background: url("menucontainer.gif");
background-repeat: repeat-y;
padding-left: 15px;
padding-right: 50px;
top: 340px;
left: 46px;
}
#menubottom {
position: absolute;
width: 247px;
height:26;
background: url("menubottom.gif");
background-repeat: no-repeat;
top: 1420px;
left: 46px;
}
#contact {
padding-left: 20px;
}
div#whiteboard {
position: absolute;
width: 530;
background-color: white;
left: 310px;
top: 300px;
padding-bottom: 20px;
border-style: dashed;
border-color: #4080CA;
z-index=100;
}
p
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
align: left;
color: #000000;
}
h1, h2, h3
{
font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;
color: #130139;
padding-left: 20px;
padding-right: 20px;
align: center;
z-index=100;
}
li {
padding-bottom: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
width: 450px;
}
A:link {
background: #E8E8E8;
font-variant: small-caps;
font-family: Arial, Helvetica, sans-serif;
font-color: #061C5E;
font-size: 16px;
font-weight: bold;
}
On my page, it's basically: <div id="whiteboard"> <p><a href="http://www.resafantasyarts.com/wanderingstar/WS1.zip">BOOK ONE</a> </p></div> Any help would be greatly appreciated! Hi. I'm new to css and this is my first positioning attempt. I am trying to position a title, subtitle and heading image to the right. I have tried different ways but I always have about 2 inches of unwanted space below the positioned elements before the body of the site. I have been trying for fix this, but concluded I don't know what I am doing wrong. Thanks in advance. Gagirl Also, is my doctype right? here is the code... (I use an external stylesheet) Code: .mainheading { font-family: Bookman Antiqua, Times;
font-size: 52px;
color: #ffffff;
position: relative;
left: 25px;
top: 70px; }
.subheading { font-family: Bookman Antiqua, Times;
font-size: 17px;
color: #f1468e;
position: relative;
left: -500px;
top: 100px; }
img.heading { position: relative;
left: 500px;
top: -75px; }
Related HTML coding: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " url blocked"> <div id="container"><span class="mainheading">Finding Happiness after Abuse</span><span class="subheading">My Wrtings on Personal Growth and Mental Health</span><img class="heading" src="flowervasetransparency.gif"> ..end of body............</div> Am I even going about this the right way? Thanks. Hi I have a page which has a header, footer, nav bar and content area using CSS and works great in IE8, FF, Chrome and Safari, and almost works in Opera. Although I have tried to avoid it, my boss wants the page to work in IE6 as we have corporate clients still using it, and I CANNOT figure out how to arrange it without fixed sizing! Can anyone help? 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><title>
Untitled Page
</title>
<style type="text/css">
#test div {
border:solid 2px red;
position:absolute;
}
#head {
height:100px;
top:0;
left:0;
right:0;
}
#nav {
left:0;
top:105px;
bottom:105px;
width:200px;
}
#foot {
height:100px;
bottom:0;
left:0;
right:0;
}
.scroll {
top:0;
right:0;
left:0;
bottom:0;
margin-left:205px;
margin-top:105px;
margin-bottom:105px;
}
</style>
</head>
<body>
<div id="test">
<div id="head"></div>
<div id="nav"></div>
<div id='x40702f5b28_scroller' class='scroll' style='overflow:scroll;'>
<div id='x40702f5b28' style='width:1024px;height:768px;position:relative;'>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
The red borders are purely so I can see where the DIVs are and don't need to be in the final version. Any help would be greatly appreciated... SW. hi, it seems like my external css is not working... Code: <link href="print.css" rel="stylesheet" type="text/css"> if i convert it to a internal one, it working fine.... i'm using a ie browser .... so if you know what is the problem or how to slove this problem, please reply me... Thanks alot.... |
|||||||