CSS - Works With Every Browser Except Ie 7??
Fixed.
Similar TutorialsI'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. 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;} well i sort of know why, because they render things differently but i have looked in my code and cant figure out why it will be different for ff click here NEWB here. Working on a project that has a custom ul w/ background images and sub menus the css currently in place works for all browsers except IE when using the IE developer tool, I can see all the applied styles for the items. For some reason IE is just randomly throwing in a padding-top from somewhere that's screwing up the alignment. There is NO source css file referenced or noted as to where it's coming from. As soon as it's removed, it display properly. I have explicitly set the style in the UL and the li to have the correct padding, but IE just seems to ignore them and throws in a padding of it's own. ANY IDEAS here? Anyone? Beuller? I have pulled my last hair so I come to you with a red face. these tags are in the head section Code: h3 {color: blue} pink {color: blue} In the body I have Code: <h3> what color is it? </h3><BR> <pink> it should be blue </pink> both lines print in blue on FF. IE6 shows h3 in blue but pink is plain, black text. Please embarass me with a simple answer. Thanks in advance, stujo Using Axure to create working prototypes for use in usability testing. The code created by Axure works well in IE7 but the function does not work in IE6...which I think, most of my usability testers will be using. What this code is trying to do is, click on a link in one box which automatically copies and pastes the code to destination box. The idea is to let the user copy and paste content from a previous message. Has anyone ever come across this issue? I'm sure it how IE handles .css but was hoping there may be a fix. Code: <DIV id=u23_rtf><span style=" font-family:'Arial'; color:#000000; font-size:15px;"><b>Message:</b></span></DIV></DIV> <SELECT id=u24 style="position:absolute; left:290px; top:558px; width:180px; height:22px; ; background-color:#FFFFFF; text-align: left ; font-family:'Arial'; font-size: 13px; color:#000000; font-style:normal; font-weight:normal; text-decoration:none" > <OPTION selected value="English">English</OPTION> <OPTION value="Spanish">Spanish</OPTION> </SELECT> <DIV id=u25 style="position:absolute; left:505px; top:623px; width:230px; height:18px; ; ; text-align: left ; font-family:Arial; text-align:left; word-wrap:break-word;" > <DIV id=u25_rtf><span style=" font-family:'Arial'; color:#000000; font-size:15px;"><b>Copy Previous Message</b></span></DIV></DIV> <SELECT id=u26 size=2 style="position:absolute; left:505px; top:646px; width:230px; height:120px; ; background-color:#FFFFFF; text-align: left ; font-family:'Arial'; font-size: 13px; color:#000000; font-style:normal; font-weight:normal; text-decoration:none" > <OPTION value="Contribute more to your / English">Contribute more to your / English</OPTION> <OPTION value="Happy Holidays / English">Happy Holidays / English</OPTION> <OPTION value="Hola / Spanish">Hola / Spanish</OPTION> <OPTION value="Time to consolidate / English">Time to consolidate / English</OPTION> </SELECT> I am trying to make a menu on my website and it works well on internet explorer 7. I went onto firefox to check it and it is not working so great. The link is:-alrwritingservices.co.uk. The css:- Code: .solidblockmenu{ margin: 0; padding: 0; float: left; font: bold 13px Arial; width: 100%; border: 1px solid #625e00; border-width: 1px 0; background: black url(backygnav.gif) center center repeat-x; list-style } .solidblockmenu li{ display: inline; } .solidblockmenu li a{ float: left; color: #FFFFFF; font-weight: bold; padding: 9px 11px; text-decoration: none; border-right: 1px solid white; } .solidblockmenu li a:visited{ color: white; } .solidblockmenu li a:hover, .solidblockmenu li .current{ color: white; background: transparent url(backgnavhover.gif) center center repeat-x; text-decoration: none; font-weight: bold; float: left; } The html:- Code: <ul class="solidblockmenu"> <li><a href="index.php" class="current">Home</a></li> <li><a href="about.php">About Me</a></li> <li><a href="samples.php">Samples</a></li> <li><a href="manual.php">Manual</a></li> <li><a href="testimonials.php">Testimonials</a></li> <li><a href="quote.php">Get A Quote</a></li> <li><a href="faq.php">FAQ Section</a></li> </ul> <br style="clear: left" /> How would i make it look better in firefox and would would be the hack for internet explorer. Is theer any help available on the internet about this? Many thanks in advance, Stevo I am new to style sheets, and I have been trying to get an entry level position with a web developer here close to me. They sent me a PSD and told me to layout using nothing but CSS and no tables. So I did so... and it looks fantastic in Firefox, but not at all good in IE. The only real problem is with the positioning.. the content color and size and everything seems to be fine.... all the positioning is done in the code on the website, where you can view source... I pasted the CSS code below, but doubtful it will help much. Can anyone offer me some help? The site is he http://www.eomnis.com/test the style sheet is here http://www.eomnis.com/test/css.css and i pasted the style sheet code below. Thanks for any help everyone. Aaron <style type="text/css"> body { background-image: url('images/main_background.jpg'); background-color:#000000; background-repeat: no-repeat; margin: 0px; } .top_text { font-size: 14px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFF00; font-weight:400; } .bold_grey{ font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#EEEEEE; font-weight:300; letter-spacing:inherit; } .small_text{ font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#EEEEEE; font-weight:300; letter-spacing:inherit; } form { font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:10px; font-weight:300; } .select { font-size:9px; height:15px; } .input { font-size:9px; height:16px; width:160px; } .zip { width: 94px; height:16px; font-size:9px; } .Footer_links{ color:#CCCCCC; font-size:14px; font-weight:300; text-decoration:none; } </style> Hi I have a website which works fine in Firefox, but has problems in Internet Explorer. can someone please have a look and see what is wrong? the positioning of the Div boxes go wrong in IE, and also it seems like the site is scretched vertically. many thanks Here's the css code. Code: .toolbar a:hover, .toolbar a:focus, .toolbar a:active { background-color:#F5F9FA; } .toolbar { border:0; padding:0; margin:auto; border-collapse:collapse; } .toolbar a { display:block; text-align:center; vertical-align:middle; white-space:nowrap; } .toolbar a:hover, .toolbar a:focus, .toolbar a:active { text-decoration:none; } It works fine when you hover over a link, it lights up the back of the td which is what I want. However I would like the whole td to act as a link. So wherever you move the mouse over the td it lights up and would link to the page, instead of just over the text. Any suggestions? I have the following CSS that I believe is valid, but it only works in IE. In fact in IE it works perfect, but in FireFox it does not display anything at all. Code: <div style="font-size:8px; text-align:left; background-color:red; width:100px;"><div style="font-size:8px; background-color:green; width:75px;"></div></div> What I am trying to do is display a rating. In the above example, the rating is 75/100, so a green bar 75px long over a red bar 100px long. www.strutmag.com/newstrut/ I'm working on a site that is using CSS layout. I use a Mac at work and the site looks great on it. I've checked it on the Mac on Safari, IE, and Firefox. When I went home the other day, and I checked the site on my PC (on IE and Firefox), the site did not layout correctly. I think the main issue is the relationship between the left section (where the large image is) and the floated right content box. I was really surprised to see it not working on my PC, so now I'm at a loss. I'm wondering if anyone has any suggestions about about the cross-platform, cross-browser differences I need to account for. Please help! Thanks! CSS I have the following CSS: Code: #leftcontent { position: absolute; top: 135px; left: 20px; width: 150px; border: 0px; } #centercontent { border: 1px solid #999999; top: 135px; margin-left: 170px; margin-right: 140px; } html>body #centercontent { margin-left: 170px; margin-right: 140px; } #rightcontent { position: absolute; top: 135px; right: 20px; width: 120px; border: 0px; } This works just fine in Firefox, but I see some problem in IE6. As I resize the width of IE window, the right border line of the center content disappears. Maybe this CSS has some problem; maybe html inside has some problem. I don't know exactly what is causing this, but I need to fix it. I don't want the right border line to disappear. I want it to be visible at all times. How can I fix this problem? How can I make the right border line visible at all times? (This is where I use this CSS.) is there anything special i need to do to get CSS to work with IE? Here is what i have above the </head> tag Code: <link rel="stylesheet" type="text/css" href="layout.css"> the layout.css has: Code: catheader { color:#ffffff; font-size: 14px; font-weight: bold; font-family: verdana; } then in the <body> i have Code: <catheader>My New Category</catheader> In netscape it shows correctly, in IE it doesnt read it at all. any ideas? I've seen this type of nav bar on different websites and have tried to figure out how it's used, but I don't know what I'm looking for. An example is on the Twidroyd site (you can google it--as a new user I can't post links) The nav bar image is three bars stacked one on top of the other, where there are bars for inactive, active, and hover. I can't figure out how this works. Not necessarily asking for a detailed explanation, just what the technique is called so I can research it myself. Any help appreciated! hi The following CSS code works in Firefox, but not IE. The site has a fixed top bar using CSS which works perfectly in firefox, but stuffs up in IE. Does anyone know what I need to change it to to fix the problem? Code: html, body { margin: 0; padding: 0; height:100%; max-height:100%; font-size: 90%; font-family: verdana, sans-serif, arial, helvetica; background-image: url('images/gradient.jpg'); background-repeat: repeat-x; background-color:#fff; } #header { position: fixed; top: 0px; left: 0px; width: 100%; height: 100px; z-index: 1; height: 50px; margin-bottom: 2em; background-image: url('images/gradient2.jpg'); background-repeat: repeat-x; } #topmenu { position: absolute; left: 250px; top: 30px; width:560px; } #stats { position: absolute; right: 15px; top: 5px; text-align: center; } #gutter { float: left; width: 3%; height: 1px; } #col { float: left; width: 70%; margin-bottom: 1em; padding-right: 3%; margin-top: 5.5em; } #rescol { float: left; width: 94%; margin-bottom: 1em; padding-right: 3%; margin-top: 5.5em; } #rescol a { text-decoration:none; } #rescol td { text-align: center; } #col1 { float: left; width: 45%; margin-bottom: 1em; border-right: 1px solid #ccc; padding-right: 3%; margin-top: 5.5em; } #col2 { float: left; width: 15%; margin-left: 3%; margin-bottom: 1em; padding-right: 3%; margin-top: 5.5em; } #col3 { position: absolute; right: 30px; margin-left: 3%; margin-bottom: 1em; margin-top: 5.5em; } #footer { clear: both; height: 50px; padding: .5em; font-size: 11px; } #footer ul { border-top: 1px solid #ccc; margin: 0; padding: 1em 0 0 0; list-style: none; } #footer li a, #footer li span { display: block; float: left; padding: 5px 1em; border-right: 1px solid #ccc; } #footer li span.copyright { border-right: none; } a:hover { color: #003; } h1 { margin: 0; padding: .5em; } h2 { margin: 0; } hr.c { border: none 0; border-top: 1px solid #ccc; width: 100%; margin-bottom: 10px; text-align: center; height: 1px; } <!--[if IE 6]> body { overflow: hidden; } div.content { height: 100%; overflow: auto; } <![endif]--> Hi all, I got my css layout to work in Opera, which is already an achievement for a newbie like me. But I'm facing some problems with FF and IE. First: in both the header image is gone Second: in IE the menu images are shown too wide resulting in a messed up menu Third: IE for some reason widens up the sidebar and content so the sidebar is shown below and also the footer is misplaced. I'm still trying to debug it myself but I don't seem to be able to solve them. my blog Any help or ideas are appreciated. Kind regards, Jef Hi, I'm trying to create a transparent background for the main text part of a site. I have the following code in the .css file: Code: .dataContainer { background-image:url('/images/transluscentbg.png'); *background: none: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transluscentbg.png',sizingMethod='scale'); padding:10px; } and call it he Code: <html><head> <link rel="stylesheet" type="text/css" href="styles/kr.css" /> <meta name="description" content=""> <meta name="keywords" content=""> <script src="rollover.js" type="text/javascript"></script> </head> <body id={$styleName|lower}> <!-- BEGIN OUTER WRAP --> <div id="bodywrap"> <div id="logoSpace"> </div> <!-- BEGIN MAIN CONTAINER --> <div id="content"> <div id="contentBorders"> <div id="mainContent" class="clearfix map{$mapNum}"> <div id="navBar"> <div id="innerContent" class="clearfix"> {include file="nav.tpl"} <div class="goContent"> <div class="dataContainer"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div> </body></html> This works fine in Firefox, but .dataContainer has no transparent background in IE. HOWEVER! It does work in both IE and Firefox if, instead of using <div> tags, I put the content in a table (<table><tr><td class="dataContainer">). Anyone have any idea why this might be happening and how i might be able to get the <div> to work? I got my css menu to work in Firefox and have it to show the way I want it to, but now in IE it just shows up as a list of course, the experienced people will no that by looking at the code which I hope you can help me out by fixing it, so here it is dont laugh. Code: ul#menu{ margin:0; padding:0; list-style-type:none; width:790px; display:block; height:40px; text-transform:uppercase; font-size:13px; background:transparent url("images/black.jpg") repeat-x top left; font-family:Helvetica,Arial,Verdana,sans-serif; } ul#menu li{ display:block; float:left; margin:0; pading:0; border-right:1px solid #ffffff; } ul#menu li a{ display:block; float:left; color:#ffffff; text-decoration:none; padding:12px 20px 0 20px; height:28px; } ul#menu li a:hover{ background:transparent url("images/blue.jpg") repeat-x top left; } Thank You Hi, I have apage where the div only works on the bottom on the page. I am trying to place it also in the center to divide content. Here is the CSS code: Code: .doubleLine{ clear:both; position:relative; float:left; width:1172px; height:6px; background-image: url(images/common/double_line.gif); background-repeat: no-repeat; margin-left:37px; margin-right:0px; margin-top:6px; margin-bottom:6px; padding:6px 0px 6px 0px; } can anyone tell me why this div with an image won't appear between content? I havetried everything I could think of. thanks |