/    Sign up×
Community /Pin to ProfileBookmark

Problem with css design layout (browser compatibility)

Hi! – i’m a relative newbie, trying to get my head around css, but i’ve come up against a problem i really can’t resolve! – it would be geat if anyone has any ideas!

Basically when viewing the below parse file in firefox it works perfectly, but when viewing in internet explorer, there is a large gap between the box containing the scroll menus (below the main heading and right of the main vertical menu), and the four images below. the gap should be only 1px (as it is ffox)

The site isn’t live but you can see the problem easily without the images there.
But if its easier – i’ve attached a zip with them in.

It would be great if anyone could help as i’m feeling way out of my depth now!
Thanks

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html>
<head>
<title> </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<meta http-equiv=”imagetoolbar” content=”no”>
<link rel=”stylesheet” href=”files/home_page.css” type=”test/css” />
<style>
body{
font-family:arial, verdana, tahoma, serif;
font-size:0.7em;
margin:0;
padding:0;
}

div#wrapper{
width:734px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
}

div#left-container{
float:left;
}

div#right-container{
margin-left:173px;
}

div#menu-container{
background-color: #8C7858;
width:173px;
margin-top:20px;
margin-left:-1px;
}

div#menu{
width:167px;
}

#menu-container ul{
text-align:right;
list-style-type: none;
padding:0px;
margin:0px;
}

ul li a{
color:#fff;
}

div#nav-bottom{
margin:0px;
padding:0px;
}

p.site-search-text{
color:#0B6D95;
margin-bottom:0px;
}

input.site-search-box{
border:1px solid #0B6D95;
margin:0px;
}

input.site-search-button{
background-image: url(“files/search_arrow.gif”);
background-color: #fff;
width:19px;
height:20px;
border:none;
cursorointer;
}

div#header-container{
margin:0px;
padding:0px;
background-color:#2E1A20;
color:#fff;
background-image: url(“files/header_top.gif”);
background-position: left top;
background-repeat: repeat-x;
}

div#header{
height:130px;
}

div#top-right{
float:right;
background-image: url(“files/home_top_right.jpg”);
width:118px;
height:120px;
margin:0px;
}

div#aval-search{
margin-top:1px;
margin-bottom:1px;
background-color:#AD9F89;
padding-bottom:3px;
}

div#image-header{
margin:0px;
padding:0px;
width:100%;
}

div#main-container{
padding:5px;
background-color: #ffc;
}

img.mw-logo{
margin-top:25px;
}

</style>

</head>
<body>
<!– MAIN WRAPPER –>
<div id=”wrapper”><div id=”left-container”>
<div id=”menu-container”><div id=”menu”>
<ul>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
<li><a href=”#”>-Menu-</a></li>
</ul>
</div>
<div id=”nav-bottom”><img src=”files/left_nav_bot.gif” width=”171″ height=”8″ border=”0″ alt=”Holidays Navigation Edge” /></div>
</div>
<div id=”site-search”>
<p class=”site-search-text”>Site search</p>
<input class=”site-search-box” type=”text”><input class=”site-search-button” type=”button” name=”submit”>
</div>
<p>Registered office</p>
<!– END LEFT CONTAINER –>
</div><div id=”right-container”><div id=”header-container”>
<div id=”header”>
<div id=”top-right”>Menu</div><img class=”mw-logo” src=”files/home_mw_logo.gif” width=”293″ height=”56″ border=”0″ alt=”Holidays – Home” />
<p> Call now</p>
</div></div>
<div id=”aval-search”>
<img src=”files/aval_search_text.gif” width=”106″ height=”19″ border=”0″ alt=”” />
<select>
<option>Greece</option>
<option>Italy</option>
<option>Sri Lanka</option>
</select>

<select>
<option value=”1″>January</option><option value=”2″>February</option><option value=”3″>March</option><option value=”4″>April</option><option value=”5″>May</option><option value=”6″>June</option><option value=”7″>July</option><option value=”8″>August</option><option value=”9″>September</option><option value=”10″>October</option><option value=”11″>November</option><option value=”12″>December</option>
</select>

<select name=”selDay”>
<option value=”1″>1</option><option value=”2″>2</option><option value=”3″>3</option><option value=”4″>4</option><option value=”5″>5</option><option value=”6″>6</option><option value=”7″>7</option><option value=”8″>8</option><option value=”9″>9</option><option value=”10″>10</option><option value=”11″>11</option><option value=”12″>12</option><option value=”13″>13</option><option value=”14″>14</option><option value=”15″>15</option><option value=”16″>16</option><option value=”17″>17</option><option value=”18″>18</option><option value=”19″>19</option><option value=”20″>20</option><option value=”21″>21</option><option value=”22″>22</option><option value=”23″>23</option><option value=”24″>24</option><option value=”25″>25</option><option value=”26″>26</option><option value=”27″>27</option><option value=”28″>28</option><option value=”29″>29</option><option value=”30″>30</option><option value=”31″>31</option>
</select>

<select name=”selYear”>
<option value=”2005″>2005</option><option value=”2006″>2006</option><option value=”2007″>2007</option>
</select>
</div>
<div id=”image-header”><div id=”images”>
<img src=”files/image_header_winsun.jpg” width=”141″ height=”144″ border=”0″ alt=”” /><img src=”files/image_header_summer.jpg” width=”141″ height=”144″ border=”0″ alt=”” /><img src=”files/image_header_ski.jpg” width=”141″ height=”144″ border=”0″ alt=”” /><img src=”files/image_header_news.jpg” width=”138″ height=”144″ border=”0″ alt=”” />
</div></div>
<div id=”main-container”>

<div class=”fr”>
Right Content
</div>

<div class=”mr”>
Good skiing starts here.
We know there’s more to a good skiing holiday than just good skiing. And over 30 years, we’ve learned a lot about what makes a good skiing holiday. Judging by the repeat bookings we get, it seems our customers agree.

The secret? We pick the best resorts, ensure that our hotels offer all the services with none of the stuffiness, and recruit the keenest, friendliest and most accomplished staff. We try to think of the big picture and the detail too.

Only the best
We offer ski holidays at some of the best resorts in the Alps, where there’s a range of slopes and runs to suit all abilities and all ages. And because you’ll want to relax after your day on the slopes, they’re places where the après-ski ambience is as enjoyable as the skiing.

Location, location, location.
In skiing, there’s no substitute for the best locations. That’s why we only offer our chalethotel holidays in the most highly-rated resorts. The skiing is exceptional. Our ski hosts know the area like locals, and will help you to get the best from your skiing.

There when you need us
Our chalethotel staff, ski hosts and award-winning childcare teams are on hand to make your ski holiday a perfect one. But if you simply prefer to do your own thing, that’s fine.
</div>
<!– END MAIN WRAPPER –>
</div>
</body>
</html>

[upl-file uuid=1d88b580-441e-4ea2-99cb-bf9f2c0a03c7 size=26kB]files.zip[/upl-file]

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@jogolSep 21.2005 — [CODE]div#image-header{
margin:0px;
padding:0px;
width:100%;
position: absolute;
}


div#main-container{
margin-top: 145px;
padding:5px;
background-color: #ffc;
}[/CODE]
×

Success!

Help @tyfire spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...