astralaaron Posted May 21, 2007 Share Posted May 21, 2007 is IE the only browser that supports CSS layouts??the site is layed out fine on my IE.. but when i tried opening it on Foxfire / opera / netscape.. the layout was all whacked out..why?? Link to comment Share on other sites More sharing options...
Jonas Posted May 21, 2007 Share Posted May 21, 2007 is IE the only browser that supports CSS layouts??LMAO! :)IE is widely acknowledged as the browser with the worst support for CSS. Can we have a look at your html code and css, to perhaps figure out what it is that makes your CSS interpretable by IE and not the others? Link to comment Share on other sites More sharing options...
astralaaron Posted May 22, 2007 Author Share Posted May 22, 2007 LMAO! :)IE is widely acknowledged as the browser with the worst support for CSS. Can we have a look at your html code and css, to perhaps figure out what it is that makes your CSS interpretable by IE and not the others?yeah check back in a little while i just woke up, thanks Link to comment Share on other sites More sharing options...
astralaaron Posted May 22, 2007 Author Share Posted May 22, 2007 this is the index.php <?php session_start();?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><link rel="stylesheet" style="text/css" href="css/index_die.css"></head><body><div id="log"><div id="logo"><?php include('SkullFlashz.html');?></div><?php include('welcome.php');?></div><div id="menu"><?php include('menu.php'); ?></div><div id="body"><br><h1>Live At The Studio</h1><p class="welcomebody">A <b>free webcast</b> streaming live from a <b>professional recording</b> and multimedia studio in Sin City: <b>Las Vegas, Nevada</b>. We feature a wide variety of programming that include: Live interactive talk shows, infomercials and informational programming, musical guests, behind the scenes multimedia recording studio sessions<b> and musicians recording and mixing their projects live.</b> There will also be strange and hilarious classic horror, sci-fi and kung fu movies, mixed with assorted oddities from the vaults as well as films and videos from independent artists and musicians. </p><h1>Free Interactive Webcast</h1><p class="welcomebody">Watch and chat live with the Tuneinordie crew and our guests, along with other viewers. Be a fly on the wall by observing us creating content for the shows and other projects in our professional recording <b>multimedia studio.</b> Discuss the shows in our interactive forums and vote for your favorite content. You can send us your films or videos to possibly be shown live. Our feed is <b>100% free entertainment, live 24/7.</b> </p><h1>Professional Audio</h1><p class="welcomebody">Our <b>professional recording studio</b> is staffed by an experienced <b>audio engineer</b>, with over 40 years of experience encompassing a wide range of projects and musical styles. Watch a gold record awarded professional sound engineer on our <b>free live web cast</b> as he tracks and mixes bands, places music and <b>sound effects</b> onto multimedia projects, and edits video. </p><h1>Live Band Recording Sessions</h1><p class="welcomebody"><b>Watch live as bands track songs</b>, overdubing, mix down tracks, and goof around in our <b>state of the art digital multimedia</b> recording studio. Get behind the scenes and view the creative process at work on our free live webcast. Bands and musicians can schedule your own live recording session or send us your video to be played on one of our shows. </p><h1>Live Talk Show Webwcsts</h1><p class="welcomebody">Interact with our hosts and other viewers live using our chat system and then continue the discussion on our interactive forums after the show is over. Explore our host's pages and explore links to their personal blogs and more information on the topics covered on specific shows. Enjoy <b>live musical guests and special events</b>. </p><h1>Weird Movies</h1><p class="welcomebody">Enjoy <b>classic Horror, sci-fi, kung fu films and cartoons</b>; a wacky and wild mix of off kilter <b>movies</b> from our favorite <b>genres,</b> mixed with strange commercials and bizarre industrial and short-lived films (think “Duck and Cover” or “Mr. Bungle”). Watch out for more and more original crazy and viral videos from our twisted staff. Order custom DVD’s of your favorite <b>videos</b>. </p></div><div id="bottom"><p class="copyright">© copyright 2007 - website developed by astralaaron@yahoo.com</p></div></body></html> stylesheet = body {background: url(http://localhost/tuneinordie/gfx/bgtest.jpg);}a:link {color: #FFFFFF; text-decoration: none; font-family:Arial, Helvetica, sans-serifl; font-size:11px;}a:visited {color: #FFFFFF; text-decoration: none; font-family:Arial, Helvetica, sans-serifl; font-size:11px;}a:hover {color: red; font-family:Arial, Helvetica, sans-serifl; text-decoration: underline; font-size:11px;}a:active {color: red; font-family:Arial, Helvetica, sans-serifl; text-decoration: underline; font-size:11px;} a.menu:link {color: #FFFF00; text-decoration: none; font-family:Arial, Helvetica, sans-serifl; font-size:12px;}a.menu:visited {color: #FFFF00; text-decoration: none; font-family:Arial, Helvetica, sans-serifl; font-size:12px;}a.menu:hover {color: #FFFFFF; font-family:Arial, Helvetica, sans-serifl; text-decoration: none; font-size:12px;}a.menu:active {color: #FFFFFF; font-family:Arial, Helvetica, sans-serifl; text-decoration: none; font-size:12px;} a.log:link {color: #FFFF00; text-decoration: none; font-family:Arial, Helvetica, sans-serifl; font-size:14px;}a.log:visited {color: #FFFF00; text-decoration: none; font-family:Arial, Helvetica, sans-serifl; font-size:14px;}a.log:hover {color: #FFFFFF; font-family:Arial, Helvetica, sans-serifl; text-decoration: none; font-size:14px;}a.log:active {color: #FFFFFF; font-family:Arial, Helvetica, sans-serifl; text-decoration: none; font-size:14px;}ul.circle {list-style-type: circle font-family:Arial, Helvetica, sans-serifl; color:#FFFFFF; margin-top:5px; margin-bottom:0px; margin-left:430px; font-size:14px; font-weight:bold;}h2 {text-align:center; margin-bottom:0px; font-family:Arial, Helvetica, sans-serifl; font-size:16px; color:#ffffff; font-weight:bold; }h1 {margin-left:35px; margin-bottom:0px; font-family:Arial, Helvetica, sans-serifl; color:#FFFFFF; font-size:16px; font-color:#ffffff; font-weight:bolder; }p.welcomebody {margin-left:35px; margin-top:0px; margin-right:50px; font-family:Arial, Helvetica, sans-serif; color:#cccccc; font-size:11px; font-weight:normal; font-style:normal; }p.copyright {text-align: center; margin-top:10px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:9px; font-weight:normal; font-style:normal; }p.menu { text-align: center; margin-top:8px; margin-right:0px; margin-bottom:0px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:11px; font-weight:bold; font-style:normal; }p.body { margin-left:0px; text-align:center; margin-top:25px; margin-right:0px; margin-bottom:0px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; font-weight:normal; font-style:normal; }p.schedule { margin-left:0px; text-align:center; margin-top:0px; margin-right:0px; margin-bottom:0px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; font-weight:normal; font-style:normal; } p.body2 { margin-left:0px; text-align:center; margin-top:5px; margin-right:0px; margin-bottom:0px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; font-weight:normal; font-style:normal; }p.welcome { margin-left:10px; margin-top:109px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:12px; font-weight:normal; font-style:normal; }#fla { background-color:#FFFFFF; position:relative; top:15px; left:10px; width:200px; height:40px; }#logo { position:absolute; top: 0px; left: 235px; width:400px; height:125px; }#log { background: url(http://localhost/tuneinordie/gfx/logoTemp.jpg); position:absolute; top:5px; left:50px; width:896px; height:125px; } #menu { background-color: #111111; position:absolute; top:130px; left:53px; width:889px; height:30px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-color: #d7d7d7; } }#body {scrollbar-face-color:#0101B1; scrollbar-shadow-color:#010265; scrollbar-highlight-color:#6767FE; scrollbar-3dlight-color:#010265; scrollbar-darkshadow-color:#010265; scrollbar-track-color:#0101BA; scrollbar-arrow-color:#FFFF00; background-color: #111111; position:absolute; top:160px; left:53px; width:889px; height:515px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-color: #d7d7d7; }#bottom { background: url(http://localhost/tuneinordie/gfx/bottom2.jpg); position:absolute; top:675px; left:50px; width:896px; height:35px; }table.schedule { border-width: 1px; border-spacing: 1px; padding:1px; border-style:solid; border-color: #770000; border-collapse:collapse; background-color: #333333;}table.schedule td { border-width: 1px; border-spacing: 1px; padding:1px; border-style:dotted; border-color: gray; border-collapse:collapse; background-color: #333333;} Link to comment Share on other sites More sharing options...
Jonas Posted May 22, 2007 Share Posted May 22, 2007 Is this site out on some server, or just on your local machine? Any chance we can see the final product, where every include file is included and the finished code is processed by the browser? Link to comment Share on other sites More sharing options...
astralaaron Posted May 22, 2007 Author Share Posted May 22, 2007 Is this site out on some server, or just on your local machine? Any chance we can see the final product, where every include file is included and the finished code is processed by the browser?this site is on my local machine right now.the Divs are all whacked out... the only browser that is displaying them right is IE.. i am fairly new to web development and I didnt think about the other browsers! i built this site it has around 188 files i worked day and night for a week to finish it - content management for the administrator / blogs a bunch of stuff.. then after I finished it i put it on my laptop to bring to show my client the product and i noticed a couple of my input text's werent reading the background color, and some were..so i downloaded firefox to see if the input color would show there and the layout was all screwed up. then I downloaded opera and it was all screwed up and then netscape..its screwed up the same way on all those browsers.IE it lays them out exactly how I wanted. Link to comment Share on other sites More sharing options...
Jonas Posted May 22, 2007 Share Posted May 22, 2007 It may be possible to rectify this with conditional comments for IE and new CSS for the other browsers, but it's necessary to see how it looks first. Link to comment Share on other sites More sharing options...
astralaaron Posted May 22, 2007 Author Share Posted May 22, 2007 It may be possible to rectify this with conditional comments for IE and new CSS for the other browsers, but it's necessary to see how it looks first.what is conditional comments?I have no way of putting it online at the moment Link to comment Share on other sites More sharing options...
astralaaron Posted May 22, 2007 Author Share Posted May 22, 2007 Hey I just downloaded firefox on this computer, and its laying out all of the divs right besides the <div id="body"> </div>and actually on 1 of the pages it is laying out that div correctly....its only that body div now, on some pages the div is completely missing and on the main page it is layed out correctly.and on the contact page it is fine....the pages do have their own css sheets but that part is written the same.. Link to comment Share on other sites More sharing options...
Jonas Posted May 22, 2007 Share Posted May 22, 2007 what is conditional comments? http://www.quirksmode.org/css/condcom.htmlSo you can use the CSS info you have for IE, and then assign other info for the other browsers outside the conditional comments. Link to comment Share on other sites More sharing options...
astralaaron Posted May 22, 2007 Author Share Posted May 22, 2007 http://www.quirksmode.org/css/condcom.htmlSo you can use the CSS info you have for IE, and then assign other info for the other browsers outside the conditional comments.what do you do differently for other browsers? Link to comment Share on other sites More sharing options...
S@m Posted May 22, 2007 Share Posted May 22, 2007 Read through this:http://w3schools.invisionzone.com/index.ph...itional+commentIE is a nightmare. Stick with Firefox/Opera to build your site. Then trash it to make it work in IE. Link to comment Share on other sites More sharing options...
astralaaron Posted May 23, 2007 Author Share Posted May 23, 2007 really wish I would have known this before all that work i did!DAMNso much work Link to comment Share on other sites More sharing options...
astralaaron Posted May 23, 2007 Author Share Posted May 23, 2007 All of this makes sence to make the stylesheet so it works on firefox/opera. then add the conditional statement and make it work on IEbut what I do not understand is what different that you do.on my pages 1 of the divs's just arent there.the body div.and on one of the pages the body div IS there but then the menu div isnt there.what do you write differently to make it work in firefox?? Link to comment Share on other sites More sharing options...
roondog Posted May 23, 2007 Share Posted May 23, 2007 If you had it online you could try to validate it. You might have errors that are causing problems. You also have some absolute positioning in there that tends to mess a few things up. The absolute positioning is also why you weren't able to center the page the other day. Link to comment Share on other sites More sharing options...
astralaaron Posted May 23, 2007 Author Share Posted May 23, 2007 If you had it online you could try to validate it. You might have errors that are causing problems. You also have some absolute positioning in there that tends to mess a few things up. The absolute positioning is also why you weren't able to center the page the other day.absolute positioning messes things up? btw i am pretty surew i changed it to relative when i put it in the container Link to comment Share on other sites More sharing options...
astralaaron Posted May 23, 2007 Author Share Posted May 23, 2007 Hey i found the major error that was making the body div not show up on some pages:before the body id i had an extra } which IE didnt think anything about but it totally messes things up on other browsersthere is still a small problem, the menu and the body divs are like a pixle or 2 bigger than in IEso it is not aligning perfectly, so how do you suggest I use the conditional statements so i can fix it in foxfire/opera and still have the IE the samethanks! #menu { background-color: #111111; position:absolute; top:130px; left:53px; width:889px; height:30px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-color: #d7d7d7; } }#body {scrollbar-face-color:#0101B1; scrollbar-shadow-color:#010265; scrollbar-highlight-color:#6767FE; scrollbar-3dlight-color:#010265; scrollbar-darkshadow-color:#010265; scrollbar-track-color:#0101BA; scrollbar-arrow-color:#FFFF00; background-color: #111111; position:absolute; top:160px; left:53px; width:889px; height:515px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-color: #d7d7d7; } Link to comment Share on other sites More sharing options...
roondog Posted May 23, 2007 Share Posted May 23, 2007 Hey i found the major error that was making the body div not show up on some pages:before the body id i had an extra } which IE didnt think anything about but it totally messes things up on other browsersthere is still a small problem, the menu and the body divs are like a pixle or 2 bigger than in IEso it is not aligning perfectly, so how do you suggest I use the conditional statements so i can fix it in foxfire/opera and still have the IE the samethanks! #menu { background-color: #111111; position:absolute; top:130px; left:53px; width:889px; height:30px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-color: #d7d7d7; } }#body {scrollbar-face-color:#0101B1; scrollbar-shadow-color:#010265; scrollbar-highlight-color:#6767FE; scrollbar-3dlight-color:#010265; scrollbar-darkshadow-color:#010265; scrollbar-track-color:#0101BA; scrollbar-arrow-color:#FFFF00; background-color: #111111; position:absolute; top:160px; left:53px; width:889px; height:515px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-color: #d7d7d7; }you've not accounted for the border.position the body div with top:161px that'll account for the border at the bottom of the menu div. Its quite hard to offer much else without being able to see the page. Link to comment Share on other sites More sharing options...
astralaaron Posted May 23, 2007 Author Share Posted May 23, 2007 you've not accounted for the border.position the body div with top:161px that'll account for the border at the bottom of the menu div. Its quite hard to offer much else without being able to see the page.i dont really understand what you are saying there Link to comment Share on other sites More sharing options...
roondog Posted May 23, 2007 Share Posted May 23, 2007 i dont really understand what you are saying therethe menu div has a height of 30 and a bottom border of 1 so actually the height of it is 31. As it is positioned 130 from the top the next thing underneath (the body div) would have to start 161 from the top other wise it would overlap. I would use margins and floats for this rather than absolute positioning as I find that works better. Link to comment Share on other sites More sharing options...
astralaaron Posted May 23, 2007 Author Share Posted May 23, 2007 the menu div has a height of 30 and a bottom border of 1 so actually the height of it is 31. As it is positioned 130 from the top the next thing underneath (the body div) would have to start 161 from the top other wise it would overlap. I would use margins and floats for this rather than absolute positioning as I find that works better.but when i change it then its off in IE, so I just need to get these conditional statements working.. <!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="css/index_IE6.css" /><![endif]-->that did not work .. have any idea how to make it work?<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="css/index_IE6.css" /><![endif]-->tried that too Link to comment Share on other sites More sharing options...
astralaaron Posted May 23, 2007 Author Share Posted May 23, 2007 ah i got it,this did not work:<head><!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="screen, projection" href="css/index_IE6.css" /><![endif]--><link rel="stylesheet" style="text/css" href="css/index_die.css"></head>this did work:<head><link rel="stylesheet" style="text/css" href="css/index_die.css"><!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="screen, projection" href="css/index_IE6.css" /><![endif]--></head> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.