![]() |
|
|||||||
| CSS Forum Cascading Style Sheets (CSS) and XHTML Forum |
|
|
![]() |
|
|
LinkBack (3) | Thread Tools | Display Modes |
|
|||
|
Hi,
see Kinetic Healing - Home Simple UL for the nav menu on the tabs on the page. I'm using poistion:relative with top:--- and left:--- to get the words to show up properly (still needs some fine tuning). I tested with IE7 (vista) - the list-style images are off the the left, and in IE6 (win2k), they're off to the left, but break the flow of the page. Desired effect is proper in FF3 (Fedora), Safari 3 (Tiger), FF3 (Tiger) Code:
#nav {
margin:0px;
padding:0px;
height:0px;
display:inline;
z-index:900;
}
#navHome {
visibility: visible;
width:10px;
left: 348px;
top: -48px;
position: relative;
}
#navServ {
visibility: visible;
width:10px;
left: 485px;
position: relative;
top: -94px;
}
#navtarot {
text-align: center;
visibility: visible;
width:10px;
left: 626px;
position: relative;
top: -149px;
}
#navCon {
position:relative;
visibility: visible;
width:10px;
left: 755px;
top: -198px;
}
#nav ul li.navactive,#nav ul li.navactive a {
text-align: center;
background-repeat: no-repeat;
background-position: center center;
font-weight:bold;
color: #337733;
}
#nav ul li.navactive{
margin:0px;
padding:0px;
list-style-image: url(../img/li-lily.png);
list-style-position: outside;
}
#nav ul li.navin, #nav ul li.navin a {
list-style-type: none;
text-align: center;
color: #555;
}
#nav ul {
width:895px;
list-style-type: none;
margin:0px;
padding:0px;
height:0px;
}
Code:
<div id="nav">
<ul>
<li class="navactive" id="navHome"> <a href="index.html">Home</a></li>
<li class="navin" id="navServ"> <a href="services.html">Services</a></li>
<li class="navin" id="navtarot"> <a href="tarot.html">Tarot Readings</a></li>
<li class="navin" id="navCon"> <a href="contact.html">Contact</a></li>
</ul>
[solution in later post at bottom] Last edited by deschnell; 13-09-2008 at 11:58 PM. Reason: solved |
|
|
|
||||
|
I'm not familiar with all the IE glitches and bugs, but I wonder if your results have anything to do with the box model hack?
|
|
|||
|
I had thought of that, but I'm not sure how that would directly be applied to the list image - as the element itself is positioned properly. It's as if the list-style-image location is not affected by the relative positioning scheme. How would I apply the box model hack in a case like this - and which elements would need it?
|
|
||||
|
Everything's out in IE, the whole page. It's too awkward to deconstruct at the moment, but are you using a reset at all?
____________________________
I am — Harry Roberts | Web Design+ Licenses now available | CSS Wizardry | And now Twitter |
|
|||
|
reset?
here's the full css file: Code:
body {
padding: 0px;
margin: auto;
width:895px;
background-position: center;
font-family:verdana, helvetica, arial, sans-serif;
font-size:.9em;
}
.access {
display:none;
}
#header {
margin-top: 2em;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-top: 0em;
border-width: 0px;
height: 325px;
width:895px;
float: none;
visibility: visible;
position: static;
display: block;
background-position: center top;
background-repeat: no-repeat;
background-image: url(../img/pageHead.jpg);
}
h1 {
margin-left:2em;
}
#content {
padding-left: 0;
padding-bottom: 0;
padding-right: 0;
padding-top: 25px;
display: block;
border-width: 0px;
border-style: none; ;
margin: 0;
clear: both;
position: relative;
visibility: visible;
background-position: center;
background-repeat: repeat-y;
background-image: url(../img/pageBack.gif);
width:895px;
}
#deb_pic {
margin-left:8em;
}
#title1 {
margin-top:3px;
margin-left:8em;
}
#services {
width:800px;
margin:0 auto;
}
#links {
width:800px;
margin:0 auto;
}
#about {
width:800px;
margin:0 auto;
}
dl {
padding-top: 1em;
padding-bottom:3em;
margin-top: 1em;
color:#336633;
font-weight:bold;
font-size:1.8em;
}
dt {
padding-top: 8px;
font-size:.7em;
color:#444;
line-height: 1.2em;
font-weight:normal;
}
dd {
color:#575;
line-height:1.3em;
font-weight:normal;
font-size:.55em;
}
p {
padding: 0px;
margin: 1em 2em;
}
dt img {
margin:0 1em;
}
a {
}
a:active {
}
a:visited {
}
a:hover {
}
#nav {
margin:0px;
padding:0px;
height:0px;
display:inline;
z-index:900;
}
#navHome {
visibility: visible;
width:10px;
left: 348px;
top: -48px;
position: relative;
}
#navServ {
visibility: visible;
width:10px;
left: 485px;
position: relative;
top: -94px;
}
#navtarot {
text-align: center;
visibility: visible;
width:10px;
left: 626px;
position: relative;
top: -149px;
}
#navCon {
position:relative;
visibility: visible;
width:10px;
left: 755px;
top: -198px;
}
#nav ul li.navactive,#nav ul li.navactive a {
text-align: center;
background-repeat: no-repeat;
background-position: center center;
font-weight:bold;
color: #337733;
}
#nav ul li.navactive{
margin:0px;
padding:0px;
list-style-image: url(../img/li-lily.png);
list-style-position: outside;
}
#nav ul li.navin, #nav ul li.navin a {
list-style-type: none;
text-align: center;
color: #555;
}
#nav ul {
width:895px;
list-style-type: none;
margin:0px;
padding:0px;
height:0px;
}
p.quote {
width:70%;
font-style:italic;
text-align:center;
margin:0 auto;
}
#footer p {
text-align: center;
background-position: center;
position: relative;
clear: both;
color: #999999;
padding: 0px;
}
#footer {
height: 27px;
padding: 0px;
margin: 0px;
margin-bottom:1em;
border-style: none;
background-position: center;
background-repeat: no-repeat;
background-image: url(../img/pageBottom.gif);
}
|
|
||||
|
Ah, right. By putting this at the top of every new project's CSS file you should be able to make this more cross browser compatible much more easily:
Code:
/*YAHOO! RESET*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,em,strong,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
/*---------- END RESET ----------*/
____________________________
I am — Harry Roberts | Web Design+ Licenses now available | CSS Wizardry | And now Twitter |
|
|||
|
ok, reset added to CSS. No changes.
what do you mean by the whole page being out in IE? I don't see any problems other than the one with the list-image? I haven't even started working on the footer...it's just there in limbo for now. |
|
|||
|
Well if anyone wants to check this and confirm, but I think I've got all problems solved. The main problem was that I had a width specified for each LI #, rather than for the UL # - when I moved this property, the list image snaps to where it should be.
There was still a large gap in IE6 where the list normally would have resided - so I used a conditional comment for IE6 to bring up the main content...more of a workaround than understanding the problem...time is always an issue. Thanks for any helpers along the way. |
|
||||
|
I'm still getting the behavior that bartoszdesign got in IE7.
____________________________
likethegoddess design for musicians and non-profits Twitter | RSS | Google Reader | Facebook | Flickr | Pandora | Last.fm |
![]() |
|
|
| Thread Tools | |
| Display Modes | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Breaking Down a Child-like Style into the Elements of Design | Graphic Design Blog | Graphic Design Blog | 0 | 23-07-2008 02:00 PM |
| Monitor Related Prob | d3niss3 | Off Topic | 3 | 11-07-2008 09:20 PM |
| Problems with CSS position. | Skoven | CSS Forum | 5 | 17-06-2008 08:09 PM |
| Apple TV style Flash Image Scroller | lolly | Flash Forum | 1 | 25-04-2008 06:33 PM |
| CSS List background image bullets - Cross browser problem | bradgreens | CSS Forum | 8 | 30-11-2007 10:54 AM |