CSS - Min-height Hack Not Working In Ie Correctly

Hello everyone,

Thanks in advance for any help you can offer.

I have a single page for a site I'm creating located he

simplethoughts.com/test/index.html

The css file for the page is located he

simplethoughts.com/test/css/screen.css

The main navigation is using suckerfish style dropdowns which work fine in IE7, firefox, and opera. However, when I try the page in IE6 or 5.5, the dropdowns 'drop' about 100px too low and WAY to the right of where they're supposed to and I can't seem to figure out why.

Thanks again for any help...it's extremely appreciated!

-Neil

Maybe I'm just missing something here, but I can't get the right column of the search box to align at the top. At first I thought it had something to do with the specified widths, but that did not work. I'm sure this is a quick fix, I can't seem to figure it out though. Thanks.

The site

Code:

		
<div id="searchbox">
			
<h2 id="searchbox_header">Browse Bus Rates and Amenities</h2>
<p style="padding-left: 5px; ">Search by Bus Type:<br />
<select name="bustype">
<option selected value="">All Bus Types</option>
<option value="1" >Deluxe Motor Coach</option>
				<option value="7" >Double Decker</option>
				<option value="4" >Entertainer</option>
				<option value="5" >Executive</option>
				<option value="9" >Limo Bus</option>
				<option value="2" >Minibus</option>
				<option value="3" >School Bus</option>
				<option value="0" >Tour Operator</option>
				<option value="6" >Trolley</option>
				<option value="8" >Van</option>
				</select></p>
<p style="padding-left: 5px; ">Departure State / Province:<br />
<select name="state" onChange="buildCity('','');"><option selected value=""> - No state selected - </option>
</select></p>
			
<p style="padding-left: 5px; ">Departure City / Metro Area:<br />
			<select name="city">
			<option value="">Entire State</option>
			</select></p>
			<div id="searchboxrightcol">
<p>Or search by Zipcode:<br /><input type="text" name="zip" size="15"></p>
<p>Browse local rates & inventory. Locate specific bus types</p>
<p><a href="#">Search</a></p>
</div>
<div id="searchbox_footer">
<p>BusRates.com does its best to screen out brokers but cannot guarantee this.</p>
</div>
</div>

CSS:

#searchbox {
width: 400px;
margin: 0;
padding: 0;
border: 1px solid #003366;
background: #CCCCFF;
}

#searchboxrightcol {
padding: 0;
margin: 0;
margin-left: 170px;
padding-left: 5px;
}

#searchboxleftcol {
width: 160px;
float: left;
padding: 0;
vertical-align: top;
border-right: 1px solid black;
}

#searchbox p {
padding-left: 5px;
padding-right: 5px;
width: auto;
height: auto;
}

#searchbox_header {
text-align: center;
color: white;
background: #003366;
padding: 0px;
margin: 0px;
width: auto;
}

#searchbox_footer {
width: 400px;
text-align: center;
color: black;
padding: 0px;
margin: 0px;
}

#searchbox a, #searchbox a:visited {
background: #336699;
text-align: center;
padding: 5px 50px 5px 50px;
border: 2px solid #003366;
color: white;
font-weight: bold;
text-decoration: none;
}

#searchbox a:hover {
background: #FC7400;
text-align: center;
padding: 5px 50px 5px 50px;
border: 2px solid #003366;
text-decoration: none;
font-weight: bold;
}

I am using a transparent png file for a background, obviously this will not work in IE so I am using the AlphaImageLoader hack. Unfortunately I am not sure why but the results are not as expected.

Here is my CSS:

PHP Code:
.wrap[class] {
    margin-left: auto;
    margin-right: auto;
    margin-top: -21px;
    width: 760px;
    top: 21px;
    min-height: 100%;
    position: relative;
    left: 0px;
    background-image: url(../images/content_bg.png);
    text-align: left;

}

* html .wrap {
    height:100%;
    padding-bottom: -20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -21px;
    width: 760px;
    top: 21px;
    min-height: 100%;
    position: relative;
    left: 0px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/content_bg.png');
    text-align: left;    
} 





The first attachment is IE and the second is Firefox (the correct one).

I can't seem to find out how to solve this.

Hello I'm a photographer trying to code my site myself, I'm a control freak and trying to learn css but coding is not my thing.
I have two different rollover effects on my page but only one part is working.
The links on the right of photo function correctly when I hover over them, but the links on top don't change as they should. a link to my css file
Can anyone help me on this? I believe i have the order correct (a:hover follows link and visited) but i'm sure it's an easy fix. Sadly, not for me. Thanks for any help

here is my site: chrisziebarth dot com/test
My css file is located in /style.css

I'm sure I'm missing something simple...All I want is a white center that meets the top and bottom (no black padding), and the page to end when the images end. It works in firefox, and mostly works in safari..but there's about 300 extra pixels below the images in IE 6,7, and 8. What am I missing? Thanks!
The (applicable) HTML --
<!-- <body>

<div id="wrapa">
<div id="right1"></div>
<div class="clear"></div>

<div id="left"></div>

<div class="clear"></div>

</div>

</body>
--!>



The CSS: <!--
html, body {max-height: 595px;
height: 100%;
overflow: hidden;
background-color: #FFF;


}

#wrapa {
height: 595px;
max-height: 595px;
}

#left {
width: 180px;
height: 595px;
max-height: 595px;

position: absolute;
top: 0; left: 0;
background-image: url("images/bamb2.jpg");
background-repeat: no-repeat;
overflow: hidden;


}

#right1 {
width: 180px; height: 595px;
max-height: 595px;
position: absolute;
top: 0;
right: 0%;
background-image: url("images/bamb.jpg");
background-repeat: no-repeat;
overflow: hidden;

}
.clear {
clear: both;
height: 1px;
padding-top: 0;
margin-top: 0;
margin-bottom: 0;
font-size: 1px;
line-height: 1px;
}

--!>

Hi there..

I have some kind of a problem.. I want to ad a min-height property in my #main div. But is'nt working, nor in FF or IE.

You are welcome to view my sources and come with any suggestions.

HTML
www . tramontano . dk /tmp/index.html
CSS
www . tramontano . dk /tmp/resources/s...montano_v1.css

Thank you for your time, and help.
Roberto Danilo Tramontano

Hi all,

The Height 100% does not seem to work in IE. So how do I go about fixing this problem?It works in Firefox , Chrome etc.

If I put a fixed width in it works but the issue with this is that the template size can change.

Stephen


<DIV class='leftDivCarry'></DIV>

.leftDivCarry
{
background:url(../images/leftBorderImage2.bmp);
background-repeat: repeat;
top:360px;
left:-16px;
width:16px;
position:absolute;
height:100%;
}

Let me start by saying I'm new to CSS and web developement in general. So I'm probably missing something simple.

I have an ASP page that has a treeview along the left, and a tab control to the right of it. I put everything in div's, and floated left the treeview and tab div's. I put a div around it all to have a border. I set that div to be height:auto (or 100%), and it doesn't expand at all. I can give it a true height, but that's not really what I want. Also, it I resize my page really small (manually), the tab div drops below the tree div. Here is the code. Can anyone point me in the right direction to accomplish what I'm trying to do? Thanks!

Code:

<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/App/Master/AmcMaster.Master" CodeBehind="CoreWorkload.aspx.vb" Inherits="Core.UI.CoreWorkload" 
    title="Core Workload" %>
<%@ MasterType VirtualPath="~/App/Master/AmcMaster.Master" %> 
<%@ Register tagprefix="controls" src="~/Controls/CoreWorkloadTv.ascx" tagname="CoreWorkloadTree"  %>  


<asp:Content ID="Content1" ContentPlaceHolderID="AuthContent" runat="server">

<asp:UpdatePanel ID="CoreWorkloadUpdatePanel" UpdateMode="Conditional" runat="server">
<ContentTemplate>

    <div id="coreWorkloadDiv" style="border-style: solid; border-width: thin; height: auto; padding-top: 5px;">

        <div id="treeDiv" style="width:150px; height: 100%; overflow:auto; float:left;" >
            <controls:CoreWorkloadTree id="wbsTree" runat="server"></controls:CoreWorkloadTree>

        </div>

        <div id="tabDiv" style="padding: 10px; float: left; width: 80%; height: 100%; ">
            <ajaxtoolkit:TabContainer runat="server" ID="Tabs" Height="600px" Width="100%" >
                <ajaxToolkit:TabPanel runat="Server" ID="SummaryPanel" HeaderText="Summary">
                    <ContentTemplate>
                        <br />WBS Summary data goes here...
                    </ContentTemplate>
                </ajaxToolkit:TabPanel>

                <ajaxToolkit:TabPanel runat="Server" ID="DetailPanel" HeaderText="Detail">
                    <ContentTemplate>
                        <br />WBS Detail data goes here...
                    </ContentTemplate>
                </ajaxToolkit:TabPanel>

            </ajaxtoolkit:TabContainer>

        </div>

    </div>

</ContentTemplate>
</asp:UpdatePanel>

</asp:Content>

Hello!

I'm hoping you guys could help me with a small problem..

I'm trying to get my images to keep their aspect ratio with this CSS,


#photo-inner img {
margin: 0 0 10px;
padding: 0 0 10px;
max-width: 718px;
width: expression(this.width > 718 ? 718: true);
height: auto;
}


Works perfectly in Firefox, Safari.. But IE don't want to play along.

Any tips?

// T

Hi Guys

I am currently trying to make a website, the problem is that its not quite working.....

I have a main div that holds everything inside it but when i set its height to auto its not staying the correct length. Basically i want this main div to stretch out longer every time new content is added (dynamically).

Why is it not staying as long as the content thats contained within it?

Anyone know why this is happening and how i can fix it ?

Help?!

Code:

#main {
height: auto;
width:868px;
margin-left:15px;
margin-top:15px;
background-color:#FFFFFF;
margin-bottom:3px;
}

Thanks

URL
(Why doesn't the image show up?)
http://drupal.org/files/issues/browser%20view.jpg

The small div with the class "left" doesnt stretch to 100%. What could be the problem?

Here is the html:
Code:

<div class="content-wrapper">
        <div class="top">
              <div class="left"></div>
              <div class="center"></div>
              <div class="right"></div>
        </div>
        <div class="content">
              <div class="left"></div>
              <div class="center">
              <div id="content" class="column"><div class="section"></div>
              <div class="right"></div>
        </div>
        <div class="bottom">
              <div class="left"></div>
              <div class="center"></div>
              <div class="right"></div>
        </div>
</div>

And here the CSS:
Code:

.content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom,
.content-wrapper .left,
.content-wrapper .center,
.content-wrapper .right {
float: left;
}

.content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom {
width: 100%;
padding: 0px 8px;
}

.content-wrapper .center {
width: 100%;
}

.content-wrapper .left,
.content-wrapper .right {
height: 100%;
min-height: 100%;
}

.content-wrapper .left {
width: 8px;
margin-left: -8px;
background: url("../images/side_left_bg.png") repeat-y;
}

.content-wrapper .right {
width: 8px;
margin-right: -8px;
background: url("../images/side_right_bg.png") repeat-y;
}

.content-wrapper .top,
.content-wrapper .bottom,
.content-wrapper .top .center,
.content-wrapper .bottom .center {
height: 9px;
}

.content-wrapper .top .left {
background: url("../images/edge_top_left.png") no-repeat;
}

.content-wrapper .center {
background: white;
}

.content-wrapper .top .right {
background: url("../images/edge_top_right.png") no-repeat;
}

.content-wrapper .bottom .left {
background: url("../images/edge_bottom_left.png") no-repeat;
}

.content-wrapper .bottom .center {
background: url("../images/bottom_bg.png") repeat-x;
}

.content-wrapper .bottom .right {
background: url("../images/edge_bottom_right.png") no-repeat;
}

Any help on this would be very appreciated! Thanks in advance!

I am sure there is an obvious explanation but why does using display:inline in this class definition stop the height/width working? Remove it and the dimensions are preserved.

PHP Code:
 DIV.special_offer_middle {
    width: 100px;
    height: 20px;
     display: inline;
    border: 1px dashed white;
 } 

I am new to CSS so bare with me if this is dumb, i have taken my page to the bare minimum trying to diagnose this. Mozilla Firefox does not seem to work with nested divs the way I think it should. IE7 works like a champ. I have a content area (mainpage) with a Vertical Navigation bar nested in it. I would expect the page to have a full background of coatedmetalsm.jpg since the mainpage is set to height: auto; But this only works in IE and Mozilla has no background. Can someone show me the error of my ways?

Thanks,
Carlos

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Heimburger Construction Company LLC - Links</title>
<link href="custom.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header"> </div>
<div id="maincontent">
  <div id="navbar">
    <p>testing</p>
    <p>testing</p>
    <p>testing</p>
  </div>
</div>
</body>
</html>

My CSS


Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color: #000;
	margin-top: 17px;
	margin-bottom: 15px;

}
#header {
	background-image: url(images/header.jpg);
	margin:0 auto;
	height: 167px;
	width: 810px;
	background-repeat: no-repeat;
}

#maincontent {
	background-image: url(images/coatedmetalsm.jpg);
	background-repeat: repeat;
	margin:0 auto;
	width: 810px;
	height: auto;
}
#navbar {
	float: left;
	width: auto;
	position: relative;
}

Hi,

First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/

Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty.

I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla

Could you look at the code and tell me whats wrong?

http://serve5.net/xcage/nav/
http://serve5.net/xcage/nav/styles/xcage.css
http://serve5.net/xcage/nav/scripts/sfhover.js
Thanks.

Hello all,

I'm really interested in hearing the opinions of those more seasoned in web development. I have been working hard at learning CSS and believe I have really improved my web design skills because of it. I love working with CSS and have completely freed myself from tables.

But... I am so tired of playing for hours with the coding just so my page looks okay in both IE and FF. I'd much rather my page look great in FF (my prefered browser) and to heck with IE.

I have made my stand and will no longer design my personal pages for IE. I have a clear message on one of them telling my visitors to wise up and download FF. Of course my audience allows me to get away with this.

I realise that if your visitors are average surfers who barely know how to do a search on google, they aren't about to deviate from IE. But for those audiences who have a little more internet experience, do you think it's cool to try and push them into using FF? In terms of usage it's clearly on the rise, IE has been steadily declining. I'd really like to see IE hit bottom.

The way I see it, as long us the development community continues to jump through hoops so people can keep using IE or other inferior browsers, there will be little motivation to develop some solid web browser standards.

Any thoughts?