CSS problem med Google chrome, safari & opera
Hejsan alla swecare, det är som så att jag håller på med en liten hemsida just nu och jag designade nyligen om layouten i css-filen till % istället för em's. Men då uppstod ett litet problem i Google Chrome, Safari och Opera (vilket jag tyckte var konstigt...) men ja i alla fall problemet är att ett av huvudelementen #footer diven inte lyder och blir 60% bred, kan detta ha att göra med child divarna som ligger inuti den? Dock har jag specifierat att varje barn-div ska vara 24% + 0.5%padding + 0.5%padding = 25% och 25%*4 = 100% och 100% = 60% eftersom att parent-elementet är så brett eller...? Skickar med lite bilder så får ni se hur problemet ser ut samt kod.
Safari, Google Chrome och Opera, problem problem..
Internet explorer och Firefox, fin fint!
<!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>
<title>Positioning - Testing</title>
<link rel="stylesheet" type="text/css" href="positioning.css"/>
<!--[if IE="IE"]>
<link rel="stylesheet" type="text/css" href="positioning_ie.css">
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div id="header">
<div id="logo">
aaa<br />
aaa<br />
aaa<br />
aaa<br />
</div>
<div id="nav">
aaa<br />
aaa<br />
aaa<br />
aaa<br />
</div>
</div>
<div id="content">
a
<br />
a
<div id="slideshow">
</div>
</div>
<div id="second_navigation">
<div id="portfolio">
<img src="images/portfolio_logo.png" class="float_img" alt=""/>
<h3 class="inside_menu_2">Portfolio</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt nunc vel nisl lacinia dignissim cursus justo feugiat. </p>
<a href="#"><img src="images/read_more_buttons.png" alt=""/></a>
<br />
<br />
</div>
<div id="our_promise">
<img src="images/our_promise_logo.png" class="float_img" alt=""/>
<h3 class="inside_menu_2">Our promise</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt nunc vel nisl lacinia dignissim cursus justo feugiat. </p>
<a href="#"><img src="images/read_more_buttons.png" alt=""/></a>
<br />
<br />
</div>
<div id="knowledge">
<img src="images/knowledge_logo.png" class="float_img" alt=""/>
<h3 class="inside_menu_2">Knowledge</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt nunc vel nisl lacinia dignissim cursus justo feugiat. </p>
<a href="#"><img src="images/read_more_buttons.png" alt=""/></a>
<br />
<br />
</div>
<div id="testimonials">
<img src="images/testimonials_logo.png" class="float_img" alt="" />
<h3 class="inside_menu_2">Testimonials</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt nunc vel nisl lacinia dignissim cursus justo feugiat. </p>
<a href="#"><img src="images/read_more_buttons.png" alt=""/></a>
<br />
<br />
</div>
</div>
<div id="footer">
<div id="twitter">
<a href="#"><img src="images/twitter_thumbnail.png" alt=""/></a>
</div>
<div id="linkedin">
<a href="#"><img src="images/linkedin_thumbnail.png" alt=""/></a>
</div>
<div id="facebook">
<a href="#"><img src="images/facebook_thumbnail.png" alt=""/></a>
</div>
<div id="skype">
<a href="#"><img src="images/skype_thumbnail.png" alt=""/></a>
</div>
</div>
</body>
</html>
body
{
background:#000000;
margin:0;
padding:0;
}
#header
{
width:60%;
margin-left:auto;
margin-right:auto;
}
#logo
{
background:url('images/logo_section.png') repeat-x;
width:25%;
float:left;
}
#nav
{
background:url('images/header_gradient.png') repeat-x;
width:75%;
float:left;
}
#content
{
background-color:green;
width:60%;
margin-left:auto;
margin-right:auto;
}
#slideshow
{
background-color:red;
width:75%;
margin:auto;
}
#second_navigation
{
background-color:red;
width:60%;
margin-left:auto;
margin-right:auto;
}
.read_more_buttons
{
background:url('images/read_more_buttons.png');
}
#portfolio
{
background-color:gray;
width:24%;
float:left;
text-align:center;
padding-right:0.5%;
padding-left:0.5%;
}
#our_promise
{
background-color:gray;
width:24%;
float:left;
text-align:center;
padding-right:0.5%;
padding-left:0.5%;
}
#knowledge
{
background-color:gray;
width:24%;
float:left;
text-align:center;
padding-right:0.5%;
padding-left:0.5%;
}
#testimonials
{
background-color:gray;
width:24%;
float:left;
text-align:center;
padding-right:0.5%;
padding-left:0.5%;
}
h3.inside_menu_2
{
color:aqua;
text-align:center;
}
img.float_img
{
padding-top:1em;
width:3em;
height:3em;
}
#footer
{
background-color:#cccccc;
width:60%;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#twitter
{
float:right;
padding-right:1.5%;
padding-top:0.5%;
}
#facebook
{
float:right;
padding-right:1.5%;
padding-top:0.5%;
}
#linkedin
{
float:right;
padding-right:1.5%;
padding-top:0.5%;
}
#skype
{
float:right;
padding-right:1.5%;
padding-top:0.5%;
}
Tack!
//Sandrerind
