HTML & CSSur HTML, XHTML & CSS
3 svar · 362 visningar · startad av smileenergy
Hej, jag har fått en rejäl designmiss i ie 6, vad annars ^^,
Det är som så att sidan ser rätt ut i i firefox, opera och ie 7 men alltså inte i ie 6, det är som så att mina divar i den "stora vita kolumnen" flyttas 15px för långt åt höger i ie6 mot vad den ligger i de andra webläsarna, se bifogad bild för att förstå. divarna som ligger i den stora vita kolumnen har namnen sub framförs sig och den vita kolumnens namn är #main.
Skulle kännas bra om någon kunde hjälpa mig med att få ordning på det här.
body { font-family:"Verdana", Arial; background-color:#999;}
#wrap { width: 800px; margin:0 auto;}
#top { width:800px; height:100px;}
#blackline { width:800px; height:22px; background:url('pic/blackline.jpg') repeat-x;}
#blackline h1{ line-height:22px;}
#maincontainer { width:800px; height:auto; background: #999 url('pic/bg.jpg') left top;}
#maincontainer::after { content:""; display:block; clear:both; }
#menu { width:140px; height:400px; position:relative; left:1px;}
#main { width:634px; position:relative; left:24px; margin-bottom:5px;}
#bottom { width:797px; height:20px; line-height:20px; background:#fff; border-top: solid 1px #666; border-right: solid 2px #333; border-bottom: solid 2px #333; border-left: solid 1px #666;}
/*meny*/
#meny{ width: 150px; margin: 0; padding: 0; list-style-type: none;}
#meny a{display: block; height: 20px; line-height:18px; background: #fff; padding:2px; text-decoration: none;}
#meny a:link{ color:#000;}
#meny a:visited{ color:#000;}
#meny a:hover{ color:#fff; background:url('pic/menu_bg.jpg');}
#meny a#current{color: #fff;}
/*sub*/
#submenu { width:634px; height:22px; background:#ccc;}
#subtitle { width:634px; height:22px; background:url('pic/menu_bg.jpg');}
#subtitle h1 { margin:0; line-height:22px;}
#subcontent { width: 630px; position:relative; left:15px;}
/*submeny*/
#submeny { margin-left:15px; padding-left:0; margin-top:0; list-style-type:none;}
#submeny li{display: inline; line-height:22px; height:22px}
#submeny a{ height:22px;}
#submeny a:link{color: #333; text-decoration: none;}
#submeny a:visited{color: #333; text-decoration: none;}
#submeny a:hover{color: #0099FF;}
/*classes*/
.alignleft {text-align:left;}
.aligncenter {text-align:center;}
.alignright {text-align:right;}
.valignmiddle { vertical-align:middle;}
.bold {font-weight:bold;}
.italic { font-style:italic;}
div.floatleft {float:left;}
div.floatright {float:right;}
div.clear { clear:both;}
.textindent {text-indent: 15px;}
.textindentblackline { text-indent: 5px;}
.textdecnone { text-decoration:none;}
.noneborder { border:0;}
/*text*/
h1 { font: 12px "Verdana", Arial; margin:0;}
.small {font:12px "Verdana", Arial;}
.xxsmall { font:10px "Verdana", Arial;}
/*Text färger*/
.white { color:#fff;}
.black { color:#000;}
.red { color:Red;}
Hej!
Behöver html-koden också! IE6 har en irriterande bugg som handlar om att man i själva html:en inte får ha radbryt eller mellanslag mellan divar ibland (alltid?) så prova först med att sudda mellanslag och radbryt så att
<div id="en_div">JA</div> <div id="en_till_div">NEJ</div>
blir
<div id="en_div">JA</div><div id="en_till_div">NEJ</div>
Fast det finns ju fler problem med IE6 :) Posta html också vettja!
det hjälpte inte kan jag säga...
det är allt inom <asp: content .... taggarna som förskjuts förlångt bort i ie6
saken är den att det hela beror på #maindiven, se föregående csskod
#main { width:634px; position:relative; left:24px; margin-bottom:5px;}
anståndet är egentligen 14px men sätter jag det måttet på left i #main så lägger han inget avstånd överhuvudtaget mellan #menu och #main i firefox, opera och ie7
Jag förstår inte heller varför han dubblar höjden i #submeny så att jag får en massa grått över den, det gråa och det blåa ska nämligen vara lika högt och är det i alla webläsare förutom ie6
här kommer min kod:
<%@ Page Language="C#" MasterPageFile="MasterPage.master" AutoEventWireup="true" CodeFile="News.aspx.cs" Inherits="Admin_News" Title="Administrera" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="submenu">
<ul id="submeny"><li class="small"><a href="News.aspx">Lägg till </a>| </li><li class="small"><a href="SelectNews.aspx">Ändra & Radera</a></li></ul></div>
<div id="subtitle"><h1 class="white bold textindent">Lägg till Nyheter</h1></div>
<div id="subcontent">
<asp:Label ID="lblStatus" runat="server" CssClass="red small"></asp:Label><br />
<h1>Rubrik:</h1>
<asp:TextBox ID="txtSubject" runat="server" Width="600px" CssClass="small"></asp:TextBox><br />
<h1>Nyhet:</h1>
<asp:TextBox ID="txtNews" runat="server" Height="200px" TextMode="MultiLine" Width="600px" CssClass="small"></asp:TextBox><br />
<asp:Button ID="btnSave" runat="server" Text="Spara nyheten" OnClick="btnSave_Click" /></div>
</asp:Content>
att den ligger fel är löst, struntade i left och ökade storleken på menu.
Så nu behöver jag bara få hjälp med att minska höjden i ie6, den dubblar den gråa submenyn som ni ser på bilden.