Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question HTML-CSS structure layout problem when viewing in IE


    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}
    Attached Files Attached Files
    Last edited by jag007; 09-16-2011 at 06:21 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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
    Teed

  • Users who have thanked teedoff for this post:

    jag007 (09-16-2011)

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •