CSS - Question About Css Browser Processing
Let's say I have three div elements
Code: <div id="container1></div> <div id="container2></div> <div id="container3></div> with the styling Code: #container1 { margin:1; padding:10; } #container2 { margin:2; padding:10; } #container3 { margin:3; padding:10; } would it be better to combine the id's like this for the padding. Code: #container1, #container2, #container3 { padding:10; } or would it be better to make a class for the padding and add it to the div element like this? Code: .container-padding{ padding:10; } #container1 { margin:1; padding:10; } #container2 { margin:2; padding:10; } #container3 { margin:3; padding:10; } <div id="container1" class="container-padding"></div> <div id="container2" class="container-padding"></div> <div id="container3" class="container-padding"></div> Which way would the browser process better? Similar TutorialsIm not a newbie to CSS but I am still a bit new to hand coding and div positioning. heres the link - http://members.cox.net/tekjock/test/ the body section I want it to be bottom 5px Left 5px right 5px I can get it to look good in firefox but IE it looks like crap. I have tried the above and it does not work. Any suggestions Thanks Okay, I'm about 6 steps into an effort to redo a section of my site... And while I swear I started out using a DIV/CSS based layout that worked in ALL browsers suddenly that is no longer the case. What I'm trying for is a navigation bar that stays fixed to the left... to the right of it are esentially 4 stacked areas: 1) the top header should stay glued to the top. 2) a middle content area that should flex reletive to the things around it 3) the second-from the bottom thing stays glued to the bottom, but has a bottom margin to place it above the footer. 4) the bottom footer should stay glued to the bottom. It works in all of my Mac browsers (Safari, Firefox, IE) as well as Firefox for windows. But IE 6.x for Windows insists on displaying all of the right-side elements way down the page... below the end of the left navigation. I simply can not force it to float/wrap to the right. Here is what I've got: http://digipix.jeffntom.com/TEMPLATE_UI-5.php Ignore the whiz-bang JavaScript stuff displaying the images, etc... and help me figure out what's up with my DIV/CSS? Here is the Div structu html4strict Code: Original - html4strict Code <div id="leftnav"> ...leftnav stuff... </div> <div id="rightbody"> <div id="header"> 1) Right-Top: ...header area... </div> <div id="content"> 2) Right-Middle: ...large image area... </div> <div id="thumbnails"> 3) Right-Lower: ....image thumbnail area... </div> <div id="footer"> 4) Right-Bottom: ...footer area... </div> </div> <div id="leftnav"> Here is the CSS: css Code: Original - css Code #leftnav { margin: 0; padding: 0; position: fixed; top:0px; width: 200px; bottom: 1px; // this locks the div to the browser bottom (minus 1px) float: left; background:#cccccc; valign: bottom; } /* this is a container that holds everything except the left navitation */ #rightbody { /* width: 100%; */ } #header { position: fixed; top: 0px; margin-left: 212px; margin-right: 0px; background: #ffffff; } #content { margin-top: 60px; margin-left: 212px; margin-right: 0px; background: #ffffff; } #thumbnails { position: fixed; bottom: 51px; margin-left: 210px; margin-right: 10px; background: #ffffff; } #footer { position: fixed; bottom: 0px; margin-left: 200px; margin-right: 10px; background: #ffffff; }
I am trying to get my container to be 100% the height of the browser window but have so far been unsuccessful, and I am not sure what I am doing wrong. Thanks for any help. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>TEST</title> <style type="text/css" media="all"> body { margin: 0; padding: 0; color: #333; font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; background: #EEEEEE; text-align: center; } a { color: #434C3E; } a:hover { color: #F15925; } #container { margin: 0 auto; width: 724px; height:100%; position: relative; background: #fff; padding: 0 10px 0 10px; text-align: left; } * html #container { width: 744px; w\idth: 724px; } #logo { position: absolute; top: 20px; left: 70px; width:94px; height:147px; background-image:url(../images/logo.gif); } h3 { color:#555555; } #top { height: 145px; margin-left:240px; } #container #intro #quickSummary .p1 { font-size: 11px; height: 171px; margin: 0; width: 724px; color: #fff; font: 12px/150% Trebuchet MS; } #container #intro #quickSummary .p1 span { padding: 30px 530px 0 30px; display: block; margin: 0; font: 12px/150% Trebuchet MS; } #text { margin: 20px 20px 0 243px; } #text p { line-height: 150%; margin: 10px 0 10px 0; } #footer { color: #fff; height: 48px; text-align: right; padding: 0 10px 0 0; line-height: 26px; font-size: 11px; } #footer a { color: #fff; text-decoration: none; } #footer a:hover { text-decoration: underline; } </style> </head> <body> <div id="container"> <div id="intro"> <div id="logo"></div> <div id="top"></div> <div id="text"> <h3>Heading number one</h3> <p class="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam arcu purus, sodales volutpat, eleifend ac, semper ut, dolor. Curabitur porttitor suscipit ligula. Sed vehicula mauris non sapien suscipit luctus. Fusce luctus pulvinar lectus. Aenean mi. Pellentesque rutrum nibh ut diam. Mauris porta, lectus sit amet ultricies lobortis, metus mauris semper orci, porta tincidunt neque dui ac magna.</p> <p class="p2">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p> </div> </div> <div id="text"> <h3>Heading Number Two</h3> <p class="p1">Etiam nec metus vestibulum lacus facilisis consectetuer. Cras sed odio. Sed et purus a pede condimentum fermentum. In hac habitasse platea dictumst. Integer ornare nisl eu sem.</p> <p class="p2">Nam laoreet, eros non cursus varius, nisi enim pharetra nisi, ut fringilla nisl turpis a diam. Proin ac elit ut nibh nonummy ultrices. Phasellus felis quam, consectetuer in, bibendum et, dictum id, mi. Nunc quis eros id metus auctor volutpat. Nunc diam odio, vehicula a, accumsan a, semper quis, mauris. Ut mauris enim, ultricies sed, viverra non, porta vitae, dui.</p> <div> <h3>Heading Number Three</h3> <p class="p1">Curabitur nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum eu purus ac nisl vestibulum ultrices. Pellentesque lacus. Suspendisse quam risus, hendrerit sit amet, gravida non, dapibus quis, ante.</p> </div> </div> <div id="footer">Foo</div> </div><!--end container--> </body> </html> Quoted from a recent post " Using a server-side language or JavaScript to send different stylesheets to different browsers is a bad practice. It tends to cause more problems than it solves. " Enlighten me on "why this is considered a bad practice " -- or even better yet, what would u suggest is a work around. Specifically ive found that the use of absolute positioning tends to vary on how it works ( or doesn't) , ive narrowed my specific problem down to what seems to be the different browser's assigning a different "meter value" ( for lack of a better term) or size increment for "1px" My test page is essentially "displaying correctly" except offset values seem to produce a varying range of "what 1px really means". IE6 (win) and FF1/2 (win) displays the test page fine - but on IE5.2(mac), Safari (not sure version, but oddly enough this browser gives the closest true values) , and FF1 (mac) seem to "define 1px as either larger or smaller" then whatever their windows counterpart decides. How would you suggest I work around this situation if not with Browser Dection via the use of serverSide / Javascript coding ( which until reading the quoted statement above, i was going to implement). Do Share please ! edit: heres the CSS file, its been validated. The issue is inspecific to my file but related to browser detection. anyway... Code: #totalcontents { z-index : 7; position : relative; } .banner { z-index : 6; position : absolute; top : -1px; z-index : 3; } #introblock { position : relative; } .navigation { z-index : 10; position : absolute; top : -33px; left : 200px; } .smallheadline { z-index: 8; position : absolute; top : -43px; left : -175px; width : 395px; color : #CCFF00; background-color : #333300; padding : 3px; border-style : solid; border-width : 1px; border-color : #999966; font-family : times; font-size : 10pt; } .dropright { z-index: 8; position : absolute; top : -67px; padding : 7px; left : 203px; color : #CCFF00; border-style : solid; border-width : 1px; border-color : #66FF00; background-color : #333300; width : 325px; } .othernews { z-index : 5; position : absolute; top : -276px; left : -175px; width : 390px; color : #FFFFFF; padding : 5px; /*border-style : solid; border-width : 1px; border-color : #CCFF00;*/ } .backdrop { z-index : -1; position : absolute; top : -635px; } html { background-color : #646464; } 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. 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;} Greetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code: ... #header{ background-color: #FFF; border: 2px solid #666666; width: 860px; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 0; } #header h1{ text-align: right; margin-right: 20px; font-style: italic; letter-spacing: 3px; } Thanks for any advice. 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! Hey, I got this simple code. In mozila firefox it looks good but in explorer appears a white area. that's not suppose to be there. please help me fix it! <html> <head> <style type="text/css"> body{ margin:0; padding:0; } div.header{ width:774px; border:1px solid; border-bottom:none; } div.main{ width:774px; border-left:1px solid; border-right:1px solid; } div.footer{ width:774px; border:1px solid; border-top:none; } </style> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <div class="header"><img src="images/bovenbalk3.gif" width="774"></div> <div class="main"></div> <div class="footer"><img src="images/onder.gif" width="774"></div> <body> </body> </html> Can different browsers interpret CSS differently because of the order you put things in? I have the following CSS in my website Code: div#container { background-color: #FFFFFF; border: 1px solid #FBFBFB; width: 660px; height: 250px; padding: 5px; margin-left: 50px; margin-top: 5px; } div#left { float: left; clear: right; width: 350px; height: 250px; background-color: #FF7800; } div#right { float: left; clear: right; width: 350px; height: 250px; background-color: #F3F3F3; margin-left: 5px; } and the html Code: <div id="container"> <div id="left"></div> <div id="right"></div> </div> in IE it works fine, the layout is next to each other in a box but in safari (on mac) the right hand box is position below the left hand one... You can see the site at http://www.impulsive-solutions.co.uk/isnoname/ Howdy folks, new to the forum and CSS (longtime tablejunkie now finding myself away from the Dark Side) but I have a question about something that is driving me crazy on this latest site and I can't find an answer or hack anywhere that seems to work. The site is: http://www.ipfwcommunicator.org/devindex.php In Moz/NN7/Safari/IE5 Mac everything is just fine. The paddings/floats are right, charspacing works fine. Basically the template is working perfectly. But exclusively in IE6 there is a peculiar change in the drawing of the top/bottom bars and the navigation bar. Basically, an additional few pixels of background color get added below the content. If you compare Firefox to IE6 on windows you'll see it: a few extra px of Dark Blue below the masthead, a few extra px of gray below the nav buttons, and (at the bottom) a few extra px of dark blue both on the left and bottom of the 'A publication of ISPN, Inc.' logo. This not only causes the bottom logo to shift up, but come out of alignment with the right hand vertical bar that runs through the content section. I've tried changing virutally everything to do with padding/margins along the course of the div definitions, naturally. I'm actually starting to think it might be an HTML render issue instead of a CSS issue: that the issue has to do with <img> border rather than CSS problems. The CSS is here Additionally, IE5.1(Mac) is insisting on left-justifying the sidebar boxes within the right-hand vertical content div, where every other browser has them (properly) centered up. Any ideas? Any insight into this would be greatly appreciated. Naturally I'm on crazy deadline and am so swamped with backend stuff that I don't really have a day to go back and forth trying new hacks (not to mention I simply lack the experience, I fear.) Anyone who solves this can have my first born... or at least my undying gratitude 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? 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 The link below looks perfect in ie8. However the div for #maincontent and the div for #footer do not align correctly in >ie8, FF or Chrome. All edges should be touching with no gray background showing through. As I'm sure you can tell, I started with a Dreamweaver template, could the code or comments the application adds could be causing the problem. ht tp://w ww.wildsheep.org/jhg/footer/new/ Thanks in advance!! -yankinmyhairout 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 ...And for once firefox is the problem! Well here it is part of the page in internet explorer first And here in firefox Why the overlap in firefox? Heres my css Code: body { margin: 0px; padding: 0px; } #header { background-color: #9F0000; width: 760px; height: 150px; margin-right: auto; margin-left: auto; z-index: 1; background-image: url(../Graphics/png/headergradient.png); background-repeat: repeat-x; } #NavDiv ul { margin-top: 0px; margin-bottom: 2px; } #MainContent table { margin-right: auto; margin-left: auto; margin-top: 0px; } #NavDiv li { list-style-type: none; display: inline; margin-right: 25px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #FFFFFF; } #NavDiv { width: 760px; background-color: #999999; height: 25px; margin-right: auto; margin-left: auto; z-index: 1; padding-top: 5px; padding-bottom: 5px; } .headertitle { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #000000; } #Footer p { text-align: center; } #MainContent { height: 600px; width: 760px; text-align: left; margin-right: auto; margin-left: auto; background-color: #FFE784; } #MainContent p { margin-left: 50px; margin-right: 50px; margin-top: -10px; } #Footer { background-color: #9F0000; height: 116px; width: 760px; visibility: visible; background-image: url(../Graphics/png/headergradient.png); background-repeat: repeat-x; margin-right: auto; margin-left: auto; bottom: 0px; position: static; } #header li { color: #FFFFFF; list-style-type: none; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } #Footer p { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFFFF; } #MainContent li { list-style-image: url(../Graphics/png/glove.png); margin-top: 1px; } And the page in question is http://bif.dmsbdesign.com/WWA.html Also anyone have the name of a good css book I can pick up? Anyone have any recommendations on a good program to check cross browser stuff. I am tired of having to open every browser up to check my sites. Also, anyone know any good links for getting better at coding for cross browser CSS? Thanks! When I shrink my browser to the left my div slides to the left out of view. Is there a way to create a cut off point so my div can neatly meet the edge of the browser and stay put when minimizing the browser to the left? Hi there! I have noticed when I go to my site in firefox, and i'm guessing it probably happens in other browsers too- the 3rd post (the title and the information saying 'bicycles for girls') drops down outside the div it should be in and messes up the bottom layout of the page. The weird thing is.. If you hit refresh it automatically fixes itself. Now this has happened quite a few times when I have looked at it. Is this any kind of recognised css bug? Any feedback would be greatly appreciated, hellosam . co . uk / portfolio Sorry, have had to put spaces in the above address so it allowed me to post! Cheers, Sam 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. |