|
CSS - Can A Smart Guy/girl Help With Browser To Browser Translation Issues?
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;} Similar TutorialsHi, I have written a site for a client: waihekemagicmassage .com The css file is magic.css The site works fine on IE7, FF 2, NN and Opera. For some reason, the vertical scroll bar on IE6 does not exist. Can anyone help tell me why? Also, how can I test this for compatibility on other browsers / mac for example. Thanks in advance. Sol Hi there, I am reposting this question after removing the extraneous items from the site. Basically, I can get things to line up in either IE or FF, but not both, I have managed to solve this with past sites, but can't seem to figure this one out! Currently I have it set so it is correctly displayed in IE: http://www.kohlrbaby.com/vcc/portfolio/portfolio.htm Please, please help me to figure out how to do fixes for this issue, I have been searching online but can't seem to figure it out and am very frustrated! Thanks so much and here is my CSS: body { margin: 0px 0px 30px 0px; padding: 0px 0px 0px 0px; font-family: verdana, arial, helvetica, sans-serif; color: #000000; background-color: #999999; text-align: center; } #title{ margin-top:0px; margin-bottom: 0px; margin-right: 0px; margin-left:0px; position: relative; float: left; clear: left; } #rightBox { border-right: 2px solid #666666; width:625px; padding: 0px; border-top: 2px solid #666666; border-bottom: 2px solid #666666; border-left: 2px solid #666666; margin-top: 0px; margin-bottom: 0px; margin-right: 0px; margin-left:0px; background: #ffffff; } .mainPic { margin-top: -475px; margin-bottom: 0px; margin-right: 0px; margin-left: 30px; position:relative; float: left; clear: left; z-index: 100; } img.pic{ border-right: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; } PS: i know I don't need to have all my margin positions shown (ie: may eventually become margin: 0px), however I have kept it like this until I figure out what my problems are. On this site http://www.freewaytransmissions.com I am having issues with the spacing on the navigation. The nav is an ul and I used inline css for spacing the links apart, but as you see in Chrome they are spaced correctly, but in IE they are not aligned correctly. If someone can shed some light I'd appreciate it. Thanks. Tom Hello, newbie he I'm helping a friend redesign his website, and I'm having a few problems regarding the look across different browsers. I'm kinda new to CSS, so any help would be awesome! http://www.manplusrocks.com/MAVIN/template.html http://www.manplusrocks.com/MAVIN/css/mavin.css The site looks just fine on IE 6.0 (except for a little gap that the Javascript leaves on the top image), and other browsers seem to be ignoring certain DIV tags. I don't know if they are ID'd incorrectly or if it's another issue... Any comments would be greatly appreciated, thanks! Hello all, I have a really anoying alignment issues with fire fox and IE. Have a look at the follwoing page in both browsers: http://pfwd.org.uk/style.htm I need to get IE to display what Firefox shows. The four rows on the left hand side (date, date value, number and number value) need to be aligned with the rows Descirption and description value. Please note not all style code is in the external stylesheet external CSS file: PHP Code: body{ background-color:#006699; font-family:Arial, Helvetica, sans-serif; } .main, header, subHeader{/*Positon values that make every thing go inside the main box */ position:absolute; left:100px; } .main, subHeader dbItem{ border: solid 1px #0099CC; } .main, header{ top:125px; left:140px; width:451px; } .main{ height:300px; } .header{ background-color:#0099CC; font-size:12px; font-weight:800; } .subHeader{ height:22px; width:200px; border: solid 1px #0099CC; background-color:#FFCC66; float: left; font-size:10px; font-weight:700; padding: 2px; } .dbHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 50px; } .dbItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; } .dbdescripHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 364px; float:right; } .dbdescripItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; width: 390px; float:right; height:48px; } .link{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:2px; color:#0099CC; text-decoration:none; float:right; } .links{ background-color:#006699; border: 1px solid #0099CC; border-top:1px solid #0099CC; color:#0099CC; text-decoration:none; padding:0 2px; } .link a:hover{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:0 2px; text-decoration:none; color:#FFCC66; background-color:#006699; } br{ margin-top:-15px; } .subsubheader{ border: solid 1px #0099CC; background-color:#FFCC66; float: left; font-size:10px; font-weight:700; padding: 2px; } page file: PHP 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> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css"type="text/css" /> </head> <body> <div class='main'> <div class='header'>Updates to the site</div> <div style='margin-bottom:20px;'> <div class='subHeader' style='height:22px;'>Search for an update</div> <div class='dbItem' style='left:180px; width: 239px; float:left; height:22px;'> <form name="search" method="post" action="post"> <select name="Year"> <option>Year</option> <option>2005</option> <option>2004</option> <option>2003</option> <option>2002</option> <option>2001</option> <option>2000</option> </select> <select name="Month"> <option>Month</option> <option>January</option> <option>Febuary</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> </select> <input type="submit" name="Submit" value="Search" /> </form> </div> </div> <div style='margin-bottom:10px;'> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem'>First set of information from the database</div> <div class='dbHeader'>Number</div> <div class='dbItem'>one</div> <div class='dbHeader'>Date</div> <div class='dbItem'>10/01/01</div> </div> <div style='margin-bottom:10px;'> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem' >Second set of information from the database</div> <div class='dbHeader'>Number</div> <div class='dbItem'>two</div> <div class='dbHeader'>Date</div> <div class='dbItem' >10/01/01</div> </div> <div style='margin-bottom:10px;'> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem'>third set of infroamtion from the database</div> <div class='dbHeader'>Number</div> <div class='dbItem'>three</div> <div class='dbHeader'>Date</div> <div class='dbItem'>10/01/01</div> </div> <!-- End on the fly scripts --> </div> </body> </html> URLS css: http://pfwd.org.uk/style.css page: http://pfwd.org.uk/style/htm Can any one help me sus out the alignment issues? thanks pfwd I have this design: http://www.thewildlifemuseum.org/designs/25/content.html Code is below. Styles are mostly within the tags. IE 6 is currently the working browser, while Firefox has the obvious problem of being too wide. I really want to be able to put that curve in but won't be able to as it currently is. Any suggestions as to how to fix it? Code:
<html>
<head>
<title>The International Wildlife Museum</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
BODY,HTML {height:100%;}
BODY {margin:0; font-family:Arial,Helvetica,sans-serif; font-size:16px; background-color:#D9A156;}
#header {text-align:center; background-color:#4A308C; padding:10px; height:144px;}
#middle {background:url("images/gradbg.gif") repeat-x; width:100%;}
#menu {background:url("images/gradbg.gif") repeat-x;}
#footer {}
</style>
</head>
<body>
<div id="header"><img src="images/header.gif" alt="International Wildlife Museum: Tucson's Natural History Museum" width="465" height="144"></div>
<div style="position:absolute; left:0; top:164px; width:170px; height:467px; z-index:5;" id="menucontainer">
<img src="images/menu/menucontainer.gif" width="170" height="373">
<div style="position:absolute; left:10px; top:15px; width:160px; z-index:30;" id="menutext">
Design<br>
Design<br>
Design
</div>
</div>
<div id="middle" style="position:absolute; left:0; top:164px; height:370px;"><img src="images/gradbg.gif" width="3" height="370">
<div style="position:absolute; left:764px; top:13px; width:36px; z-index:20;" id="trcorner"><img src="images/trcorner.gif" width="36" height="34" alt=""></div>
<div style="position:absolute; left:101px; top:13px; width:699px; border:solid 3px #000000; background-color:#FFFFFF; padding-left:69px;" id="body">
<div id="content">
<span style="font-size:180px;">N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br>
N N<br></span>
</div>
</div>
</div>
</body>
</html>
I'm having a bit of trouble getting my font to align itself in the middle of a DIV (as it has a background). In FireFox it looks fine, in the middle of the div. But in Netscape and IE it is at the very top of the div (in Netscape) and really high (in IE). Usually I would just add padding-top to the div to position the text in the center, although this then knocks out FireFox. Not sure the best way to solve this? Would I have to import a different CSS file for the browers? I guess this would be best so I can target the little issues with each. How would I do this and make the browers know which is which? Thanks HTML Code: <div id="nav"> <ul> <li class="first"><a title="#" href="#">About Company</a></li> <li><a title="#" href="#">RRR News</a></li> <li><a title="#" href="#">Apartment Communities</a></li> <li><a title="#" href="#">Commercial Properties</a></li> <li><a title="#" href="#">Current Developments</a></li> <li class="last"><a title="#" href="#">Resident Login</a></li> </ul> </div> CSS Code: /*** Main Navigation Styling ***/
#nav {
border-top: 1px solid #897409;
border-bottom: 1px solid #897409;
background:#fff url(../images/nav_off_back.jpg) repeat-x center;
height: 29px;
}
#nav ul{
font-size: 17px;
margin:0;
float:left;
text-align:center;
width:100%;
}
#nav li {
display:inline;
margin:0;
float:left;
list-style: none;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
min-height: 27px;
height: 27px;
line-height:27px;
padding:1px 0;
}
#nav li.first {
background:url(../images/nav_bars.gif) left center no-repeat;
padding-left:2px;
_margin-left:24px;
}
#nav li.first a,
#nav li.first a:link{
border-left:0;
}
#nav li.last {
border-right:1px solid #fff;
}
#nav li a {
color: #000;
text-decoration: none;
text-align:center;
min-height: 27px;
height:27px;
padding:6px 17px 6px 17px;
border-right:1px solid #b49f36;
border-left:1px solid #fff;
}
#nav li a:hover {
text-align:center;
background: url(../images/nav_on_back.jpg) repeat-y center;
color:#fff;
min-height:27px;
height: 27px;
padding:6px 17px 6px 17px;
}
This code produces a centered horizontal navigation menu in FireFox Mac and IE6 PC. However, in FireFox PC the whole menu is shifted a bit to the right off-center (about 15 px). In IE7 PC, the menu sits on the left and is not centered at all. I am willing to use a browser sniffer to fix the IE7 problem, but I'm not sure what to do for Firefox. The PC and Mac versions of Firefox usually play nice, but not this time. I'd rather not use both a platform AND browser sniffer, but I'm running out of ideas. The addition of a pixel-specific line-height for #nav li { helped some earlier issues, but did not fix them all. 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 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. Hi guys Please help me out. This webpage should look like this: But in some browsers the photograph (bottom right hand floating DIV with background image) does not load! WHY?! Thanks! Im trying to do some CSS frame emulation for a curve on my site so that it follows the screen, but (and this is a surprise, i feel) it only works in IE!! Not in firefox. Im not sure why. Here is the CSS file that holds the frame emulation: Code:
@media screen
{
body
{
margin: 0;
padding: 1em 1em 1em 14em;
color: #000;
background: #fff;
}
div.fixedBox
{
position: fixed;
top: 1em;
left: 1em;
width: 12em;
border: 1px solid #000;
background: #eee;
}
div.fixedBox p
{
margin: 1em;
}
/* Don't do this at home */
* html
{
overflow-y: hidden;
}
* html body
{
overflow-y: auto;
height: 100%;
padding: 0 1em 0 14em;
font-size: 100%;
}
* html div.fixedBox
{
position: absolute;
}
/* All done. */
}
Is there an error here? I got this off here. Not sure what is going wrong, like i said it work in IE, but not firefox, whereas the example on the above site works in both. Any ideas? hi all, i'm doing a content management system front end form that worked perfectly until i tried the last bit of debugging and found that when resizing the browser it distorted the page... is there a way around this? im fairly new to CSS and have been using relative positioning for my divs. I have some css issues between browsers and was wondering if anyone could help. I'm new here so it won't let me post the URL, but here's a description. In safari and firefox I get a small gap between the top of the browser window and the content container, so my background shows on top. In IE it's all flush to the top. I want flush to the top everywhere, with the background only visible along the left and right sides. In IE and safari there's a box around the (clickable) logo, in safari there's not. I don't want the box. I specified no border, but I still get the box. I specified the image midway down the main content area to align left so the text would wrap around it to the right. I see this take effect in dreamweaver's design view, but not live. I have been setting up a wordpress blog for my family, and have run into troubles getting it to show up the right way between browsers. In older versions of IE (5.0, 6,0), the blog posts are pushed down, and begin where the sidebars end. I am using a newer version of IE and the blog shows up perfectly. I have family members who use the older versions, and it shows up terrible. Is there anything that can be done with it? I am fairly new at web design. I am using the RockinPaper 3 column theme if that helps at all. Thanks for any help and advice! http://warcraftpress.com/index.php (If it displays a whitepage, revisit the link again) Working on browser compatibility, and well, IE is a stubborn one, yes? For some reason, it places post areas below the right menu, as well as some spacing issues. I've checked in FireFox 3 (which I designed in), Safari, and Opera, but only IE does this issue. (IE7, I mean. I no longer care to support IE6) One other thing I see is the menu items's arrow graphic cuts off in other browsers, I'd say it has to do with the height and other specifications in the CSS, but I do make a mess to try and make something work :P The big arrow graphic (the normal) is at a height of 22, while the small (sub menu) one is 18. Both are in pixel measurements. Thanks a lot in advance for the help! You can find the stylesheet he http://warcraftpress.com/wp-content/themes/default/style.css Hello, I'm confused about how exactly to name classes in a specific situation. I'm getting unexpected results, and I'm not sure if it's browser support or my code. Does .classy a { something: something; } describe all anchors nested in an element with the class "classy"? Can I do that even? Or is it the same as .classy, a { something: something; } To describe two things that both have the same styles. Do I need comma's or is .classy .classless { something: something; } the same thing as .classy, .classless { something: something; } Thanks how can i change the icon that is displayed at the top of the browser(by default the broswer logo) and the icon that is displayed next to pages in favourites, so that my logo shows up there? thanks |
|||||||