- This topic is empty.
-
AuthorPosts
-
April 23, 2009 at 9:41 pm #24678StotleDMember
Hello All!!
I am working on my site in Firefox 3.0.9 (and a bit newer with CSS than probably many of you here) and it looks fair so far. However, I have a floating horizontal nav bar at the top that looks like is stepping down. Here is what I attempted so far:
1) I have adjusted the margins, zeroed the padding and changed the width of the background image – all to no effect.
2) I tried to create a IE7 folder and point the browser their with a different stylesheet – no effect.
3) I tried to use IE7.js to solve the issue – no effect.
IE is driving me batty! Any thoughts? Here is my CSS & HTML (no laughing ;-) )
Also, here is the link: http://www.core4innovative.com (ignore the fonts – they are not rendering properly according to my stylesheet)
Thanks!!!
Code:/*—my css—*/#body {
margin: 0px 0px 20px 0px;
text-align: center;
background: #450000 url(images/greenstrip.jpg) repeat-x right top;
}#maincontainer {
width: 720px;
border-width: 8px;
border-color: #fff;
border-style: solid;
position: absolute;
margin-left: 50%;
left: -360px;
margin-right: auto;
}#box p {
position: absolute;
color: #fffceb;
width: 450px;
margin-top: 275px;
margin-left: 16px;
background: #373635;
font-size: medium;
font-family: “arial rounded mt bold”, “times roman”;
text-align: left;
line-height: 1.5em;
padding-left:7px;
padding-right:7px;
padding-bottom:7px;
border-style:solid;
border-color:#bec783;
border-width: 3px;
}#lowerbox p {
position: absolute;
color: #fffceb;
width: 450px;
background: #373635;
font-size: medium;
font-family: “arial rounded mt bold”, “times roman”;
text-align: center;
line-height: 1.5em;
padding-left:7px;
padding-right:7px;
padding-bottom:7px;
border-style:solid;
border-color:#bec783;
border-width: 3px;
width: 450px;
margin-top: 433px;
margin-left: 16px;
}#featured p {
position: absolute;
color: #000;
width: 270px;
margin-top: 825px;
margin-left: 128px;
background: none;
font-size: small;
font-family: “arial rounded mt bold”, “times roman”;
text-align: center;
line-height: 1.5em;
}#customize p {
position: absolute;
color: #000;
width: 270px;
margin-top: 825px;
margin-left: 420px;
background: none;
font-size: small;
font-family: “arial rounded mt bold”, “times roman”;
text-align: center;
line-height: 1.5em;
}.name {
font-weight: bold;
font-style: italic;
color: #bec783;
}ul {
margin: 0px;
width: 680px;
line-height: 0em;
list-style: none;
font-size: medium;
font-family: “arial rounded mt bold”, “times roman”;
float: left;
background: url(images/button.gif);
}ul a {
display: block;
padding: 0 1.2em;
line-height: 2.2em;
text-decoration: none;
color: #fff;
float: left;
margin-left: 6px;
margin-right: 0;
}ul li {
float: left;
width: auto;
}ul a:hover {
color:#f26214;
}ul a:visited {
text-decoration: none;
}#textpad ul {
position:absolute;
width:100px;
margin-top: 335px;
margin-left: 481px;
background: none;
text-decoration: none;
}.promise a {
display: block;
color:#000;
line-height: 1em;
font-size: 30px;
font-family: “freestyle script”;
width:150px;
}.promise a:visited {
text-decoration: none;
}#fet a:link, #fet a:visited {
text-decoration:none;
color: #000;
}#fet a:hover {
color:#f26214;
}
Core 4 Innovative: Website Solutions For Your Small Business
Core 4 Innovative puts your online success within reach. Using our affordable
website solutions, unique development process and standardized
methods for design you can be sure to recieve a customized product that adds value to your business!We Serve Every Major Industry:
Restuarants • Real Estate • Insurance • Entertainment • Apparel • Automotive • Energy • Professional ServicesCustomize Your website
April 24, 2009 at 1:32 am #56707StotleDMemberThe first thing I did was adjusted the margins on the nav area. It did not work out for me. Any other thoughts?
April 25, 2009 at 7:34 pm #56737AshtonSandersParticipantIt looks like you have no handled this. Right? The nav looks good in IE7 and IE6.
April 29, 2009 at 4:00 pm #56907StotleDMemberYes – everything looks great. Thanks!!
April 29, 2009 at 4:18 pm #56908MeshachMemberInstead of using this:
Code:border-color:#fff;
border-width:8px;
border-type:solid;You could use this:
Code:border:8px solid #FFF;Same with padding:
Inefficient:
Code:padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;Efficient:
Code:padding:1px;Or if you want to give a 5px padding on the right and a 1px padding everywhere else you would do this.
Code:padding:1px 5px 1px 1px;You can also do the same with margin, just remember it goes in a clockwise pattern (top, right, bottom, left).
Have fun.
Meshach
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.