Jump to content
  • 0

Резиновый header

tarkinsky

Asked by tarkinsky,

 Share

Question

tarkinsky Explorer

tarkinsky

Posted
Posted

Помогите пожалуйста.

Вот сверстал по советам хэдар. Середина должна растягиваться до левой и правой картинки, в Firefox все ок, но в IE по бокам почему то остаются полосы((

Вот код HTML: 


<!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" xml:lang="en" lang="ru">
<head>
<link rel="stylesheet" type="text/css" href="styles.css"  />
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie_styles.css" />
<![endif]-->
</head>
<body>
  <div id="main">
    <div id="header_carrier">
      <div id="header_left_build">
      </div>
      <div id="header_right_build">
      </div>
      <div id="header_build_prolong">
      </div>
    </div>
  </div>
</body>
</html>

Вот код css: 


html, body, #main{margin:0; padding:0; position:relative;	width: 100%;}
body{     
  width: 100%;
  height: 100%;
  background: url(pics/background_color.gif) repeat-x;
  padding-bottom: 1%;
}  
#main{
  margin: 0px 3px;
  width: auto;
  height: auto;
  position: auto;
  min-height: 100%;
  height: auto !important;
  height: 100%;
} 
#header_carrier{
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 202px;
  border: 1px solid blue;
}
#header_left_build{
  margin: 0px;
  padding: 0px;
  height: 100%;
  background: url(pics/header_building_left.gif) top left no-repeat;
  width: 364px;
  float: left;
  border: 1px solid red;
}
#header_right_build{
  margin: 0px;
  padding: 0px;
  height: 100%;
  background: url(pics/header_building_right.gif) right center no-repeat;
  float: right;
  width: 365px;   
  border: 1px solid black; 
}
#header_build_prolong{
  margin: 0px;
  padding: 0px;
  height: 100%;
  background: url(pics/header_building_prolong.gif) top left repeat-x;
  background: red;
  margin-left: 364px;
  margin-right: 365px; 
  border: 1px solid green;
  width: auto;
}

Вот скриншот как есть сейчас (именно в IE) в firefox все четко! - СКРИН

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
vikver Explorer

vikver

Posted
Posted (edited)

Предположительно, как возможный вариант, попробуйте 

display:inline;

для #header_left_build, #header_right_build, #header_build_prolong, но при этом уберите float. В коде html добавьте <img> к соответствующим блокам - #header_left_build и #header_right_build. Для #header_build_prolong изображение как фоновое оставьте в стилях.

Edited by vikver
Link to comment
Share on other sites
  • 0
alexandr_v-vich Explorer

alexandr_v-vich

Posted
Posted (edited)

Это float

Либо display: inline для плавающих элементов

Либо менйте float на что-нибудь другое

Ну, vikver вам написала там.

Либо забейте на IE6

Edited by alexandr_v-vich
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept