CSS Mesh-up when viewed in IE

5 replies [Last post]

Fri, 2010-08-20 15:45

topvizstudio

Offline

newbie

Timezone: GMT-4

Joined: 2010-08-20

Posts: 3

Points: 4

Hey Folks,

When my web site is viewed in Inter Explorer, DIV tags seems to merge down. It might be a newbie question, but honestly, I cannot find anything wrong with the code. Please help!

Site: www.topvizstudio.com

Snapshot of how it looks like in IE:

New Site Design:

P.S I know the code is a little weird, I just started with CSS, I am currently working on redesigning the site and the code is much more clean, but the issue is still there.

Thank you,

Code:

 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/fadeslideshow.js"></script>
 
<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [560, 210], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/slide.jpg", "", "", "Digital Interior Re-Design Practice | by Topvizstudio"],
		["images/slide_2.jpg", "", "", "Levoy Movie Theatre | Digital Rostoration Project | by R2Architects"],
		["images/slide_3.jpg", "", "", "Sun Flower Building | Architecture Design and Visualization by Topvizstudio"],
		["images/slide_4.jpg", "", "", "Digital Interior Re-Design Practice | Popov Architects "] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 750, //transition duration (milliseconds)
	descreveal: "peekaboo",
	togglerid: ""
})
</script>
 
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-13015055-3']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
 
 
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
 
 
<style type="text/css">
body {
	background: url(images/background.jpg)
	}
 
#header {
	height: 183px;
	width: 1010px;
	background-position:top;
	background-image: url(images/banner.jpg);
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#container {
	height: 1067px;
	width: 1010px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-image: url(images/body.jpg);
}
#content-wrapper {
	float: left;
	width: 313px;
	height: 1067px;
	font-size: 16px;
}
#secondary-content {
	width: 267px;
	float: left;
	height: 211px;
	margin-left: 46px;
	margin-top: 31px;
	font-family: Tahoma;
	color: #FFFFFF;
	font-size: 14px;
	text-decoration: none;
	line-height: 19px;
}
#secondary-content li {
	text-decoration: none;
	padding-top: 3px;
	padding-right: 1px;
	padding-bottom: 1px;
	padding-left: 1px;
}
#secondary-content a {
	color:#FFFFFF;
	text-decoration: none;
}
#secondary-content a:link {
	color:#FFFFFF;
	text-decoration:none;
	padding: 1px;
}
#secondary-content a:hover {
	color:#FF9900;
	text-decoration: none;
}
#secondary-content-animation {
	width: 240px;
	height: 150px;
	font-family: Tahoma;
	color: #FFFFFF;
	font-size: 16px;
	text-decoration: none;
	float: left;
	margin-left: 59px;
	margin-top: 20px;
	background-image: url(images/youtube.jpg);
}
#secondary-content-text {
	width: 240px;
	height:50px;
	font-family: Tahoma;
	color: #FFFFFF;
	font-size: 11px;
	text-decoration: none;
	float: left;
	margin-left: 59px;
	margin-top: 10px;
}
#secondary-content-text-2 {
	height: auto;
	width: 235px;
	font-family: Tahoma;
	font-size: 12px;
	margin-left: 60px;
	margin-top: 15px;
	float:left;
	color: #FFFFFF;
}
 
 
#content-wrapper-2 {
	float: left;
	width: 631px;
	height: 1067px;
	font-size: 16px;
	margin-left: 18px;
}
#content-wrapper-2-slider {
	float: left;
	width: 580px;
	height: 311px;
	font-size: 16px;
	margin-left: 25px;
	margin-top: 31px;
}
#content-wrapper-2-fadeshow {
	float: left;
	width: 560px;
	height: 210px;
	font-size: 16px;
	margin-top: 10px;
	margin-left: 10px;
}
#content-wrapper-2-text {
	height: 75px;
	width: 560px;
	font-family: Tahoma;
	color: #FFFFFF;
	font-size: 12px;
	float: left;
	margin-top: 7px;
	margin-left: 10px;
	line-height: 18px;
	margin-right: 3px;
}
#content-wrapper-2-images {
	float: left;
	height: 600px;
	width: 580px;
	margin-top: 15px;
	margin-left: 25px;
}
#content-wrapper-2-images-1 {
	float: right;
	height: 110px;
	width: 580px;
	z-index: 9999;
}
#content-wrapper-2-images-1-text {
	font-family: Tahoma;
	font-size: 11px;
	float: left;
	height: 90px;
	width: 110px;
	color: #FFFFFF;
	margin-top: 10px;
	margin-left: 6px;
}
#content-wrapper-2-images-1-image {
	height: 100px;
	width: 450px;
	float: left;
	margin-top: 5px;
	margin-left: 9px;
}
#lightbox{
    z-index:9999;
    }
.style1 {color: #FF9900}
</style>
 
</head>
<body>
 
<!--Module 1-->
<div id="header"></div>
<!--Module 2-->
<div id="container">
  <div id="content-wrapper">
	<div id="secondary-content"> 
      <ul type="circle">
                        <li><a href="index.html" target="_parent">Home</a></li>
                        <li><a href="about_us.html" target="_parent">About</a></li>
						<li><a href="3d_visualization.html" target="_parent">3D Visualization</a></li>
                        <li><a href="graphic_design.html" target="_parent">Graphic Design</a></li>                        
                        <li><a href="photography.html" target="_parent">Photography</a></li>
                        <li><a href="web_design.html" target="_parent">Web Design</a></li>
                        <li><a href="contact_info.html" target="_parent">Contact Info</a></li>
      </ul>	    
    </div>
 
	<div id="secondary-content-animation">
    	<a href="http://www.youtube.com/watch?v=yr0cXfmamnA"><img src="images/youtube.jpg" border="0" /></a>
    </div>
 
    <div id="secondary-content-text">
    	This is our recent animation project - Siena Hotel, which is located in Miami, Florida. Please click on the image to view high resolution version.
    </div>
 
    <div id="secondary-content-text-2">
    	<u><b class="style1">3D Visualization services:</b><br />
      </u>
      <ul type="square">
      <li> Interior or Exterior 3D Rendering
      <li> Camera Matched 3D Rendering
      <li> Floor Plan 3D Rendering
      <li> Walkthrough and flyby animation
      <li> Industrial Design
      <li> Concepts/Gadgets Visualization    
      <li> Interior Design  
      </ul>
      <u><b class="style1">2D and Graphic Design Services</b></u>
      <ul type="square">
      <li> Photo Retouching
      <li> Brochures
      <li> Posters 
      <li> Logo Design
      <li> Flyers
      <li> Custom Envelops
      </ul>
      <u><b class="style1">Web Design Services</b></u>
      <ul type="square">
      <li> Flash/HTML/CSS
      <li> - Improve your proffesioanl image
      <li> - Promote your Company/Business
      <li> - Showcase your products
      </ul>
    </div>
 
  </div>
 
 
 
  <div id="content-wrapper-2">
  	<div id="content-wrapper-2-slider">
    	<div id="content-wrapper-2-fadeshow">
    	 <div id="fadeshow1">
         </div>
        </div>
        	<div id="content-wrapper-2-text">
            Topvizstudio - is a creative company specializing in 3D illustrations, Digital Animations, Graphic Design and Artistic Photography. Our services are the most suitable for Architectural, 		Engineering and Real Estate Development needs. We utilize some of the best software and designers needed to complete the most complex and demanding tasks while offering competitive rates and professional quality.
            </div>
   	</div>
 
    <div id="content-wrapper-2-images">
    	<div id="content-wrapper-2-images-1">
        	<div id="content-wrapper-2-images-1-text">
            	Prince Sport Logo<br />
by Serge Pikhotskiy<br /><br />
    Graphic Design<br />
    & visualization<br />
    by topvizstudio
            </div>
 
            <div id="content-wrapper-2-images-1-image">
            	<a href="images/gr_2.jpg" rel="lightbox[roadtrip]" title="Prince Sports Logo Concept"><img src="images/topvizstudio_14.jpg" border="0" /></a>
 
            </div>
    	</div>
 
        <div id="content-wrapper-2-images-1">
        	<div id="content-wrapper-2-images-1-text">
            	 Rutgers University <br />
    by R2A Architects<br />
    <br />
    Interior Design<br />
    & visualization<br />
    by topvizstudio
            </div>
 
            <div id="content-wrapper-2-images-1-image">
            	<a href="images/Render_2.jpg" rel="lightbox[roadtrip]" title="Rutgers University Locker Room Design Concept"><img src="images/topvizstudio_07.jpg" border="0" /><a>
 
            </div>
    	</div>
 
        <div id="content-wrapper-2-images-1">
        	<div id="content-wrapper-2-images-1-text">
            	 Rockpool Housing<br />
    by Popov Architect<br /><br />
    Interior design<br />
    & visualization<br />
    by topvizstudio
            </div>
 
            <div id="content-wrapper-2-images-1-image">
            	<a href="images/Render_4.jpg" rel="lightbox[roadtrip]" title="Digital Interior Design"><img src="images/topvizstudio_11.jpg" border="0" /><a>
 
            </div>
    	</div>
 
        <div id="content-wrapper-2-images-1">
        	<div id="content-wrapper-2-images-1-text">
            	    Voorhees Develop.<br />
    by R2A Architect<br />
    <br />
    3D Visualization <br />
    created by <br />
    Topvizstudio
            </div>
 
            <div id="content-wrapper-2-images-1-image">
            	<a href="images/Render_5.jpg" rel="lightbox[roadtrip]" title="Echelon Mall / Voorhees Development by R2A Architects"><img src="images/topvizstudio_13.jpg" border="0" /><a>
 
            </div>
    	</div>
 
        <div id="content-wrapper-2-images-1">
        	<div id="content-wrapper-2-images-1-text">
            	     Digital Visualization<br />
    by Serge Pikhotskiy<br />
    <br />
    3D Visualization <br />
    created by <br />
    Topvizstudio
            </div>
 
            <div id="content-wrapper-2-images-1-image">
            	<a href="images/3d_viz_1.jpg" rel="lightbox[roadtrip]" title="Product Visualization"><img src="images/topvizstudio_15.jpg" border="0" /><a>
 
            </div>
    	</div>
 
 
    </div>
 
  </div>
 
 
</div>
</body>

Tags:

CSS Layouts

Sat, 2010-08-21 05:04

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

Is the site supposed to look

Is the site supposed to look like the first screenshot or the second (colour-wise)? Because I've just viewed it in Safari on a Mac, and it looks like the first one. But part of your problem in IE, I imagine is because you've used fixed pixel heights on all your boxes. Don't do it a) because different browsers render text differently and you'll just give yourself headaches trying to find the right pixel value to suit all browsers, and b) because if people have their browser set up to display text at a size other than what you've designed it at, it's going to screw up your design. You don't need to specify heights - just let the content dictate the height of things.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Sat, 2010-08-21 18:17

topvizstudio

Offline

newbie

Timezone: GMT-4

Joined: 2010-08-20

Posts: 3

Points: 4

Thanks for the reply. So, I

Thanks for the reply. So, I guess the height and width should be set "Auto" for most of the time?

Sun, 2010-08-22 08:39

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

You can set widths but you

You can set widths but you should avoid setting heights at all where possible (the default is auto, so no need to specify it).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Wed, 2010-08-25 17:55

topvizstudio

Offline

newbie

Timezone: GMT-4

Joined: 2010-08-20

Posts: 3

Points: 4

So, do you actually think the

So, do you actually think the problem is in specified width and heights?

Wed, 2010-08-25 20:42

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8123

Points: 1302

Tyssen wrote: But part of

Tyssen wrote:

But part of your problem in IE, I imagine is because you've used fixed pixel heights on all your boxes.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

CSS Mesh-up when viewed in IE

Is the site supposed to look

Thanks for the reply. So, I

You can set widths but you

So, do you actually think the

Tyssen wrote: But part of

New forum topics

User login

Navigation