Har problemer med CSS layout
Hej eksperter,Jeg og en anden en har sat os for at lave et virtuelt fodboldmanagerspil lidt lige som Virtual Manager (virtualmanager.com). Som programmmøren har jeg lidt problemer med at få siden til at funge i både ie og firefox.
Jeg skriver min side i Ruby on Rails, hvis dette har nogen betydning.
Her er koden:
style.css:
body {
background-color: #e6e0ce;
text-align: center;
position: relative;
}
img {
border-width: 0px;
}
#sortlinje {
top: -5px;
position: relative;
height: 40px;
}
#main {
top: -5px;
background: url('../images/DesignLine.png') center;
position: relative;
width: 884px;
text-align: left;
margin: auto;
}
#content {
position: relative;
margin-left: 10px;
}
#footer {
margin: auto;
width: 884px;
position: relative;
bottom: 5px;
}
#designline {
background: url('../images/DesignLine.png') center;
position: relative;
width: 884px;
text-align: left;
margin: auto;
}
application.html.erb (layout-delen af siden):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
<% if @pagetitle %>
<%= @pagetitle %> - Virtual Football Manager
<% else %>
Virtual Football Manager
<% end %>
</title>
<%= stylesheet_link_tag 'style' %>
</head>
<body>
<%= link_to image_tag "Top.png", :controller => 'about' %>
<div id="designline">
<div id="sortlinje">
<%= image_tag "SOrtLinje.png" %>
</div>
<div id="main">
<div id="content">
<%= yield %>
</div>
</div>
</div>
<div id="footer">
<%= image_tag "DesignLine2.png" %>
</div>
</body>
</html>
<%, <%= og %> er alle til ruby on rails
Alt hvad der står i mellem <% og %> er ren ruby on rails kode
Alt hvad der står i mellem <%= og %> er ruby on rails kode der bliver fortolket og resultatet bliver lagt ind som ren html.
kommandoen yield er den der skifter over til den primære side.
I den er der ikke andet end en tekstlinje (ren html).
Mit problem er at den i firefox laver mellemrum mellem den hvide baggrund på siden og footeren (placeret i div'en footer).
Udover det placerer den indholdet af content alt for langt nede (alt sammen i firefox).
Hvis jeg prøver at rette det i firefox bliver den underlig i IE.
Håber på et svar (er sikkert meget simpelt).
På forhånd tak
lakridserne
