Resolved HTML-CSS structure layout problem when viewing in IE

jag007 · 09-15-2011, 09:56 AM

Hi,
I just started to put my 1st HTML-CSS code for structure of my project website.
I have put layout using HTML-CSS, but problem is one row in layout is getting chopped when i view the same in IE, but all is well in chrome,opera,safari.
I can not figure out what went wrong and what should I do to solve this problem.
(When I check design view in DW CS5 its looking ok too, I can't understand where I am going wrong with IE. And If website is not looking good in IE then, it will be failure of my mini project)

HTML and CSS files are also attached in ZIP file.

Pls help!

Thanks in advance.

Regds...........
Jag007

HTML CODE >>>>

Code:

<html>
<head>
	<title>Gameplay-Gaming portal</title>
    <meta name="description" content="Asia's No.1 Gaming portal" />
    <meta name="keywords" content="Gaming, racing games," />
    <link rel="stylesheet" href="default.css" type="text/css"/>
</head>
<body id="background" style=" background-position:center" >
<div id="center" align="center">

<!-- LOGO FRAME -->
	<div id="logo_back">
    	<div id="logo_back_blank"></div>
        <div id="logo" ></div>
        <div id="logo_back_blank"></div>
    </div>
    <div id="Lomenu_gap"></div>
   
<!-- MENU FRAME -->   
    
    <div id="menu_back">
    	<div id="menu_back_blank"></div>
        <div id="menu_button"></div>
        <div id="menu_seperator"></div>
        <div id="menu_button"></div>
        <div id="menu_seperator"></div>
        <div id="menu_button"></div>
        <div id="menu_seperator"></div>
        <div id="menu_button"></div>
        <div id="menu_seperator"></div>
        <div id="menu_button"></div>
      <div id="menu_seperator"></div>
        <div id="menu_button"></div>
        <div id="menu_back_blank"></div>
    </div>
    <div id="Lomenu_gap"></div>
    
<!-- HOME STORY FRAME INCLUDING LATEST VIDEOS -->    
    
    <div id="home_story_back">
    	<div id="home_story_back_blank"></div>
    	<div id="home_story_frame">
    		<div id="home_story_image"></div>
        	<div id="home_story_textframe"></div>
   		</div>
  		<div id="home_story_video_gap"></div>
   		<div id="video_frame">
        	<div id="video_title"></div>
            <div id="video_title_gap"></div>
            <div id="video_image"></div>
            <div id="video_text"></div>
            <div id="video_image"></div>
            <div id="video_text"></div>
            <div id="video_image"></div>
            <div id="video_text"></div>       
        </div>
        <div id="home_story_back_blank"></div>
    </div>
    <div id="Lomenu_gap"></div>  
    
<!-- TAB FRAME -->  
	<div id="tab_back">
    	<div id="tab_back_blank"></div>
        <div id="tab_frame"></div>
        <div id="tab_back_blank"></div>
    </div>
    <div id="Lomenu_gap"></div>
    
<!-- BOTTOM MENU FRAME -->   
 	<div id="bottom_menu_back">
    	<div id="bottom_menu_back_blank"></div>
      	<div id="bottom_menu_button"></div>
        <div id="bottom_menu_seperator"></div>  
        <div id="bottom_menu_button"></div>
        <div id="bottom_menu_seperator"></div>
        <div id="bottom_menu_button"></div>
        <div id="bottom_menu_seperator"></div>
        <div id="bottom_menu_button"></div>
        <div id="bottom_menu_seperator"></div>
        <div id="bottom_menu_button"></div>
        <div id="bottom_menu_seperator"></div>
        <div id="bottom_menu_button"></div>
        <div id="bottom_menu_back_blank"></div>
     </div> 
     <div id="Lomenu_gap"></div>
    
</div>    
  

</body>
</html>

CSS CODE >>>>

Code:

#background{background-color:#000; width:100%; height:100%; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px }
#center {margin:auto; top:0px; width:100%}
#logo_back{margin:auto; width:768px; height:131px; top:0px}
#logo_back_blank{margin:auto; width:4px; height:131px; float:left; background-color:#666}
#logo{margin:auto; width:760px; height:131px; float:left}

#Lomenu_gap{margin:auto; width:768px; height:12px; top:0px; background-color:#666}
#menu_back{margin:auto; width:768px; height:65px; top:0px; background-color:#666}
#menu_back_blank{margin:auto; width:4px; height:65px; float:left; background-color:#666}
#menu_button{margin:auto; width:125px; height:65px; float:left}
#menu_seperator{margin:auto; width:2px; height:65px; float:left}

#home_story_back{margin:auto; width:768px; height:376px; top:0px}
#home_story_back_blank{margin:auto; width:4px; height:376px; float:left; background-color:#666}
#home_story_frame{margin:auto; width:508px; height:376px; float:left}
#home_story_image{margin:auto; width:508px; height:176px; top:0px}
#home_story_textframe{margin:auto; width:508px; height:200px; top:0px}
#home_story_video_gap{margin:auto; width:10px; height:376px; float:left; background-color:#666}

#video_frame{margin:auto; width:242px; height:376px; float:left}
#video_title{margin:auto; width:242px; height:50px; top:0px}
#video_title_gap{margin:auto; width:242px; height:8px; top:0px; background-color:#666}
#video_text{margin:auto; width:242px; height:31px; top:0px; background-color:#666}
#video_image{margin:auto; width:242px; height:75px; top:0px}

#tab_back{margin:auto; width:768px; height:374px; top:0px}
#tab_back_blank{margin:auto; width:4px; height:374px; float:left; background-color:#666}
#tab_frame{margin:auto; width:760px; height:374px; float:left; background-color:#1a1a1a}

#bottom_menu_back{margin:auto; width:768px; height:18px; top:0px}
#bottom_menu_back_blank{margin:auto; width:4px; height:18px; float:left; background-color:#666}
#bottom_menu_button{margin:auto; width:125px; height:18px; float:left}
#bottom_menu_seperator{margin:auto; width:2px; height:18px; float:left}

teedoff · 09-15-2011, 02:40 PM

First things first. You haven't declared a valid doctype, which IE, and all browsers for that matter need if you expect cross browser compliance.

Second, you have quite a few coding validation errors. You should validate often throughout the coding phase to ensure clean code. Many of your errors, besides the doctype, is that you have multiple id's with the same name. ID's must be unique, whereas classes can be the same.

Fix those errors and then see how it renders in IE. btw, dont rely on DW's browser view to accurately display a webpage. Test in ALL modern and some older browsers.

Finally, I would suggest you read about divitis. You dont HAVE to wrap every element in a div. Many elements are already grouped together and can thus stand on their own.

I recommend that you head over to w3schools.com and start working through their html/css tutorials for a better basic understanding of code.

Hope this helps

jag007 · 09-16-2011, 06:18 AM

Hi,
Teed,
You solved my problem, after adding valid doctype, its looking correct in IE too.
Though I am in initial stage, I will certainly look for clearing those validation error.
(I am not yet familiar with id's and class and their differnece)
I again thank you for your time.
Cheers.

Regds.......
Jag007