|
CSS - Sometimes Displays In Ie (ie7 Fixed Positioning Issue)
Hi everyone,
I have posted here [HTML Programming] because I'm not entirely sure what forum this particular problem should be put in. I have a fixed menu that I include using php. From looking at the source code I can see that it has definately included the menu. However IE only displays the menu 50% of the time. I have no idea why. At first I thought it was because I have a javascript animation for it to slide down, but I removed that and I still get the same problem. To see what I mean please visit twisted-reality.co.uk using IE and refresh a few times. Firefox, Opera, Safari and Netscape all display the menu fine, but IE feels like it needs to be different. I'm new to this forum but I hope someone can help Twisted-Daemon Similar TutorialsThe link below shows the fixed positioning layout I need to achieve, but rather than have the scrolling content fixed to the left or right hand side I want to have it centered with the navigation fixed and just to the left of the scrolling content. Like the image below: http://limpid.nl/lab/css/fixed/header Is this possible? Thanks Using Firefox, the current state of the site I am working looks like I want it to look, yet in IE 6 it does not look correct, surprise. (IE7 looks great). I've tried several things, and I am completely lost as to a solution, I'd love some help, or suggestions, thanks. UTC Site I realize older IE versions don't play nice with the position: fixed tag.... and I need an alternative. can someone please explain why this doesn't work? here is my style sheet.... Code:
body { background-image: url(../images/spacer.gif); background-repeat: repeat; height: 100%; width: 100% color: 000; }
p {
margin-bottom: 0em;
line-height: 1.5;
}
div.sub h4,
div.sub { color: #000;
}
img {
border: none;
}
div.main {text-align: left; width: 555px; height: 427px; clear: both; border: solid 0 #fff; padding: 0;}
div.journalhead { position: absolute; top: 427px; left: 1px; width: 555px; height: 73px; }
div.projects { position: absolute; top: 333px; left: 555px; width: 344px; height: 44px; }
div.logo { position: absolute; top: 1px; left: 555px; width: 345px; height: 332px; }
div.projectthumbs { position: absolute; top: 376px; left: 555px; }
div#journalbottom { position: absolute; top: 453px; left: 1px; width: 555px; height: 47px; }
ul { position: absolute; float: left; margin-bottom: 0; }
ul#fader li img { text-align: left; position: fixed; top: 1px; left: 1px; width: 555px; height: 427px; padding: 0; }
.fade{
margin-bottom: 0em;
}
.fade p{
margin-bottom: 0em;
text-align: center;
width: 100%;
}
a:link {color: #000; }
a:visited {color: #000; }
a:active {color: #333; }
a:hover {color: #333; }
any light shed would be great, i realize it's a bit sloppy at present. please help I have my website at omel.co.cc I have a menu that I positioned absolute, but when I view in a different resolution the menu changes position, I have put a parent div positioned relative but every time I scroll the menu moves which I do not want to, when positioned fix, the position of the menu goes off, on different resolutions and when I resize the window, I have googled these, hope someone could help, or I just did not googled enough? Hey everyone, im having a problem. I am trying to get a picture fixed at the bottom of the screen and am stuck. Do i do it as a footer or do i do something else? Can anyone help me please cheers. Hi All, I'm trying to add an image that will remain fixed on the screen, and I'm having a hard time positioning it using CSS. I already have a background image for the body (which is tiled), and this image needs to sit above that image, but below the rest of the content. Here's my code as it stands now: CSS: Code: @charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
background-image: url(../assets/images/space_2_background.jpg);
background-repeat: repeat;
margin: 0;
background-attachment: fixed;
}
.oneColElsCtrHdr #sirius2 {
background-image: url(../assets/images/sirius_2.png);
background-repeat: no-repeat;
position: fixed;
padding-top: 123px;
padding-left: 743px;
}
.oneColElsCtrHdr #container {
width: 58em;
border: 1px solid #000000;
text-align: left;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 30px;
padding-bottom: 30px;
}
.oneColElsCtrHdr #header {
background-image: url(../assets/images/header_background.png);
background-repeat: no-repeat;
height: 73px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 20px;
}
.oneColElsCtrHdr #header h1 {
margin: 0;
}
.oneColElsCtrHdr #logo {
padding-top: 15px;
padding-left: 3px;
}
.oneColElsCtrHdr #mainContent {
background-image: url(../assets/images/page_1_background.png);
background-repeat: no-repeat;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
padding-top: 0px;
height: 520px;
}
.oneColElsCtrHdr #footer {
background-image: url(../assets/images/footer_background.png);
background-repeat: no-repeat;
height: 244px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
.oneColElsCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
HTML: Code: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sphere Nine Media</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body class="oneColElsCtrHdr"> <div id="sirius2"></div> <div id="container"> <div id="header"> <div id="logo"><img src="assets/images/sphere_nine_logo_v9.0.1(website).png" alt="Sphere Nine Media Logo" width="191" height="37" /></div> <!-- end #header --></div> <div id="mainContent"> <!-- end #mainContent --> </div> <div id="footer"> <!-- end #footer --></div> <!-- end #container --></div> </body> </html> The code specific to this image is in bold red . I've tried coding this image both as a straight image and a background image, and I've gone through numerous iterations of changing positioning/padding/margin values, to no avail. The current code is the only variation I've happened upon that actually renders the image on the screen - you can see it live at http://www.spherenine.com/. Please let me know if this can be done using my current approach, or if there's a better way to accomplish it. I'll be happy to provide additional info if necessary. Thanks in advance. Sam Hi all, Okay, so I've got a page with a central column which has a drop-shadow and a background image... The obvious problem is that the repeated background image doesn't always line-up with the background image in the dropshadow. Plus, The backround image changes position whenever the page is resized. So I was looking here, to see if I could find the code to center the background image in the screen, and make it a fixed position, but even then, when you resize the page, the background image seems to move with it. Does anyone know how to fix a background image so that it will stay aligned with the central content/dropshadow of the page? Thanks. Join Date: May 2008 Posts: 2 Firefox bug combining absolute and fixed positioning Hey helpful people. I am designing a site which has a floating toolbar (position: fixed) with popup menus. The popup menus are using nested lists and position: absolute to display. JavaScript is dealing with the transition. The problem is that in firefox alone the fixed toolbar jumps when the popup menus show and hide. Removing either position: fixed or the offset (bottom: 27px) removes this problem. However these need to be present in the design. Anyone know a workaround? (webpage and css below) Code: <div class="toolbar_O">
<div class="toolbar_I">
<!-- top page info -->
<div class="pageInformation cf">
<!-- Page Status Info Start -->
<div class="pageStatus">
<h4 class="statusLabel">Status: </h4>
<span class="status">Live</span> </div>
<!-- Page Status Info End -->
<div class="RHS cf">
<div class="toolbarMenu">
<ul>
<li class="publicationDates"><a href="#" title="Publication dates">Publication dates<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<form>
<p>
<label for="email" class="expiryDate">Set expiry date</label>
</p>
<input type="text" class="inputTextbox" name="expiryDate" id="expiryDate"/>
<p>
<label for="email" class="liveDate">Set live date</label>
</p>
<input type="text" class="inputTextbox" name="liveDate" id="liveDate"/>
</form>
</li>
</ul>
</li>
<li class="dateAction"><a href="#" title="Last published">Last published 29/01/08<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<p class="cf"><span class="label">Author:</span><span class="value">Anne Light</span></p>
<p class="cf"><span class="label">Approver:</span><span class="value">John Smith</span></p>
<p class="cf"><span class="label">Review date:</span><span class="value">21/06/07</span></p>
</li>
</ul>
</li>
<li class="versions"><a href="#" title="Other versions">Other versions (#)<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<p>Ann Light's version sent for approval on 24/12/07 at 10.03am</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- bottom user functions -->
<div class="userFunctions cf">
<!--Left Hand Side Buttons Start -->
<div class="btnLHS"> <a id="#" class="btnHelp" title="Help" href="#">Help</a>
<div class="toolbarMenu pageActions">
<ul>
<li class="otherPageActions"><a href="#" title="Other page actions">Other page actions<span class="moreArrow"><span class="wai">^</span></span>
<!--[if gte IE 7]><!--></a><!--<![endif]-->
<ul class="popup">
<li>
<ol>
<li><a href="pa001a_delete_page.html" class="lbOn modal:{width:450}" title="Delete page">Delete this page</a></li>
<li><a href="pa002_set_date.html" class="lbOn" title="Set date">Set publication/expiry date</a></li>
<li><a href="pa003_page_permissions.html" class="lbOn modal:{width:450}" title="See page permissions">See page permissions</a></li>
<li><a href="pa004_add_subpage.html" class="lbOn" title="Create sub page">Create sub page</a></li>
<li><a href="pa005_page_history.html" class="lbOn modal:{width:450}" title="See page history">See page history</a></li>
<li><a href="#">Preview</a></li>
<li><a href="link_1d.html" class="lbOn modal:{width:450}" title="Save a copy">Save a copy</a></li>
</ol>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Left Hand Side Buttons End -->
<!-- Right Hand Side Buttons Start -->
<div class="btnRHS"><a href="st016_page_notes.html" class="lbOn pageNotes" title="page notes">See page notes</a> <a id="#" class="btnReject" title="Do Not Approve" href="#"><span class="buttonText">Don't Approve</span></a> <a id="#" class="btnApprove" title="Approve" href="#"><span class="buttonText">Approve</span></a> </div>
<!-- Right Hand Side Buttons End -->
</div>
</div>
</div>
Code: div.toolbar_O {
background: #eaf1f9 url(../images/interface/toolbar_bg.gif) 0 0 repeat-x;
border: 1px solid #3a8ea8;
padding: 9px 0px;
width: 729px;
color: #0a3b3f;
font-size: 0.9em;
position: fixed;
bottom: 20px;
left: 100px;
height: 82px;
}
body.editMode div.toolbar_O {
position: relative;
left:0;
bottom: 0;
float:right;
}
.toolbar_O .toolbar_I {
border: 1px solid #073f58;
background: url(../images/interface/toolbarinner_bg.gif) #54b4cc;
margin: 0px 9px;
}
.toolbarMenu ul li a,
.toolbarMenu ul li a:visited {
font-weight: bold;
color: #77aeb5;
border: 1px solid #287e95;
text-decoration: none;
padding: 4px 5px 6px 5px;
background: #e6f4f5;
color: #0a3b3f !important;
display: -moz-inline-box;
display: inline-block;
height: 13px;
}
.toolbarMenu ul {
padding:0;
margin:0;
list-style-type: none;
margin: 0;
}
.toolbarMenu ul li {
float:left;
position:relative;
margin: 0 0 0 10px;
}
.toolbarMenu ul li ul li {
margin: 0;
font-size: 0.9em;
}
.toolbarMenu ul li ul {
visibility: hidden;
position:absolute;
bottom: 27px;
left:0;
padding: 5px;
background: #ebf6f8;
border: 1px solid #2e869c;
margin: 0;
z-index: 1000;
font-size: 1em;
text-align: left;
}
.toolbarMenu ul .moreArrow {
display: -moz-inline-box;
display: inline-block;
padding: 6px 8px;
width: 1px;
margin-left: 10px;
border-left: 1px solid #89abb7;
background: url(../images/interface/morearrow.gif) 3px 0 no-repeat
}
.toolbarMenu ul li.open ul {
visibility: visible;
}
.toolbarMenu ul li.versions.open ul {
width: 250px;
}
div.toolbar_O .toolbarMenu ul li.open a {
color: #4594A5 !important;
}
div.toolbar_O .toolbarMenu ul li.open .moreArrow{
background: url(../images/interface/closearrow.gif) 3px 0 no-repeat;
}
/* top part of toolbar */
.toolbar_O .pageInformation {
padding: 6px;
height: 25px;
}
.toolbar_O .pageInformation .pageStatus {
color: #FFF;
font-size: 1.3em;
width: 170px;
float: left;
}
.toolbar_O .pageInformation .RHS {
float: right;
}
h4.statusLabel {
height: 100%;
display: inline;
text-transform: uppercase;
}
div.toolbar_O div.pageInformation .label,
div.toolbar _O div.userFunctions .label {
width: 75px;
float: left;
text-align: left;
}
div.toolbar_O div.pageInformation .value,
div.toolbar _O div.userFunctions .value {
font-weight: bold;
text-align: left;
float: right;
vertical-align: top;
width: 75px;
}
div.toolbar_O div.pageInformation .inputTextbox {
width: 80%;
}
/* bootom part of toolbar */
.toolbar_O .userFunctions {
padding: 8px 0;
height: 25px;
}
div.toolbar_O div.userFunctions div.btnRHS {
float: right;
margin: 0px 10px 0px 0px;
}
div.toolbar_O div.userFunctions .btnLHS {
float: left;
margin: 0px 0px 0px 10px;
}
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp,
div.toolbar_O div.userFunctions div.btnLHS a.btnHelp:hover {
padding: 5px 5px 5px 25px;
margin: 1px 5px 0 0;
background: #e6f4f5 url(../images/interface/icon_help.gif) 3px 3px no-repeat !important;
float: left;
border: 1px solid #287e95;
text-decoration: none;
font-weight: bold;
color: #0a3b3f;
height: 12px
}
.toolbarMenu.pageActions {
float: left;
}
.toolbarMenu ol {
margin: 0;
padding: 0;
width: 320px;
height: 60px;
list-style: none;
}
.toolbarMenu ol li,
.toolbarMenu ol li a {
margin: 0;
padding: 0;
float: left;
width: 150px;
min-height: 8px;
display: inline-block;
border: none !important;
color: #0a3b3f !important;
font-size: 1.2em;
background: none;
}
div.toolbar_O div.toolbar_I a.pageNotes {
font-weight: bold;
color: #0a3b3f;
}
div.toolbar_O div.toolbar_I a.pageNotes:hover {
color: #FFF;
}
/* approve/reject btns */
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove,
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
border: 1px solid #287e95;
border-bottom: 2px solid #06465f;
border-right: 2px solid #06465f;
text-decoration: none;
height: 12px;
padding: 5px 15px 5px 0;
background: #fffeff url(../images/interface/icon_approve.gif) 95% 3px no-repeat;
display: -moz-inline-box;
display: inline-block;
color: #0a3b3f;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnApprove:hover,
div.toolbar_O div.userFunctions div.btnRHS a.btnReject:hover {
background-color: #135d82;
border: 1px solid #FFF;
border-bottom: 2px solid #06465f;
border-right: 2px solid #06465f;
color: #FFF;
}
div.toolbar_O div.userFunctions div.btnRHS a.btnReject {
background: #fffeff url(../images/interface/icon_reject.gif) 95% 3px no-repeat;
}
li.otherPageActions ul,
li.otherPageActions ul li{
margin: 0;
padding: 0;
list-style: none;
}
Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
Hello, Im making my Dad a website for his London Tour company, and ive pretty much got everything the way i want, i just need to add the content. However my only issue is that the positions of certain things changes in I.E.. Example: http://www.aranock-online.com/projecta In Firefox it works fine, In i.e it doesnt Hi I am not really very familiar with the positioning element. I have a site that has a fixed width in the center of the page. It all works fine. However there is a hidden box that pops up when you enter any text in the newsletter box at the top right - this appears outside of the fixed width and I cannot understand why it is allowed to do so. I notice that it does have "absolute" positioning defined in the CSS. Any clues as to what I can do to bring it back to its correct place under the newsletter box? Thanks a lot Site: http://www.componentcompare.com I have a two column DIV arrangment (inside a one coulmn page layout), and above it, I want a single div that will contain absolut positioned images. Here's the two column CSS: Quote: /* 2 column div setup for map and sidebar */ #mapwrap { width:980px; margin:0 auto; } #mapmain { float:right; width:680px; } #mapsidebar { float:left; width:300px; } #testimg { position:relative; left:100px; top:150px; } And... Code:
<div id="buttondiv"><img src="/images/buttons/7on.png" id="testimg"></div>
<div id="mapwrap">
<div id="mapsidebar">
<div id="findaddydiv">
Something
</div>
</div>
<div id="mapmain">
Something Else
</div>
</div>
My problem is that when I build the DIV for the images in the code above the two column set-up, and view the whole thing, the images are ON TOP of the two coulun DIVs. How to force the image DIV to be ABOVE the two-column set-up? I have a page with a bunch of DIVs i'm trying to get positioned correctly. I want to have two DIVs sit next to each other, so I float one, right? I can get them to sit next to each other, but then the top line of the content in the 2nd DIV sinks down below the floated div. I can't get it to work. Any help? CSS: Code: html{}
body{
color: #000000;
margin: 0;
padding: 0;
background-color: #666666;
}
.container{
height: auto;
width: 650px;
margin: 0px 0px 0px 0px;
background-color: #333333;
}
/* Container Styles */
#news{
float:left;
position:relative;
width: 295px;
background-color: #FFF;
margin: 0px 0px 10px 25px;
}
#contact{
width: 295px;
background-color: #FFF;
margin: 0px 0px 10px 0px;
position:relative;
left: 325px;
}
HTML: Code: <div class="container"> <div id="news"> <h2>News</h2> <ul class="newslist"> <li>12.11.03 + news text...</li> <li>11.12.02 + more news text...</li> </ul> </div> <div id="contact"> <h2>Contact</h2> <ul class="contactlist"> <li><a href="#">mail be...</a></li> <li><a href="#">Design by ....</a></li> </ul> </div> </div> Thanks! I just used position: relative;. Solved. EDIT: Thanks for the help -- i've switched over to a more stable template so no need to help with the code below. Hey all, The problematic CSS codes a .rightbar { position:relative; top:292px; left:444px; float:right; text-align: left; width: 300px; height:250px; background: white; color: #000000; } #mogad { position: relative; top:0px; left:-15px; width: 300px; height: 250px; float: right; padding-left: 0px; padding-top: 20px; margin-left: 160px; } and #header{ padding:20px 0px 40px 0px; margin-left: 242px; position:relative; text-align: left; background: url((URL address for bg img)) no-repeat top left; } If you open the link in Firefox/Safari you can see that the Ad in the top right corner is to sit side-by-side with the main header image. The Ad also lines up with the rightbar links directly beneath it. The problem(s) are in IE where the Ad and rightbar links remain in the correct spot but the header height increases inexplicably and sort of messes up the organization. Any thoughts? If you would like more code let me know and I will do my best to be more descriptive. Thank you in advance for any help! Paul I am trying to place an element in a page that will over lap other elements. If I use position: relative; the element (a div cell) gets to far down on the page. If I use position: absolute to specify the verical position but not the horizontal it works perfectly in Firefox, but not IE (because IE requires both a vertical and horizontal specification in their abosolute positioning) works in Firefox, but not IE Code: position: absolute; top: 170px; I cant specify a horizontal position because the div cell needs to be inside another cell that is centered (so when the window is resized the main cell moves around. Here is the page because I'm sure my explanation is confusing. http://www.davenport-rock.com/news.php If you look at it in fire fox it looks good, but in IE, its not lined up right. Does someone know how to make this work in IE (and other browsers)? I am learning css and ran into a problem I can't figure out. When I add text in my main content div, it does push my footer down like I want it to. However, it keeps the existing space in the div between the content and the footer leaving a large gap at the bottom of the screen. Can anybody help me? The developing site is he thinkfishdesign - dot - com/temp/tf/ This is the css code : Code: @charset "utf-8";
/*-------------------
Style Template
-------------------*/
/*-------------------
HTML Styles
-------------------*/
body {
text-align: center;
margin: 0px;
background-color: #FFF;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.3em;
}
/*-------------------
Structural Styles
-------------------*/
#container-content {
position:relative;
margin:0 auto;
height:auto;
width:980px;
height:auto;
text-align:left;
}
#container-page {
position:relative;
width:100%;
height:auto;
text-align:center;
}
#content-container {
position:relative;
top:-17em;
width:100%;
}
#content {
position:relative;
left:13em;
top:-33em;
width:45em;
}
#content-main {
position:relative;
width:100%;
height:auto;
}
#footer {
position:relative;
top:0em;
width:100%;
height:12.6em;
}
.footer {
background-image:url(images/template_footer.jpg);
background-repeat:no-repeat;
}
#intro {
position:relative;
left:20em;
top: -34em;
width:38em;
height:8.8em;
white-space:normal;
}
#logo {
position:relative;
left:50em;
top:-19em;
width:11em;
height:11em;
}
.logo {
background-image:url(images/template_logo.jpg);
background-repeat:no-repeat;
}
#photo-main {
position:relative;
left:1em;
top:1em;
width:16em;
height:20em;
}
.photo-main {
background-image:url(images/template_fish.jpg);
background-repeat:no-repeat;
}
/*-------------------
Side Navigation Styles
-------------------*/
#nav-container {
position:relative;
left:1.3em;
top:-12em;
width:12em;
height:19em;
}
.nav {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1em;
}
.link-nav a {
color: #000;
text-decoration: none;
}
.link-nav a:visited {
color: #000;
text-decoration: none;
}
.link-nav a:hover {
color: #F60;
text-decoration: underline;
}
/*-------------------
Footer Navigation Styles
-------------------*/
#footer-nav{
position:relative;
top:13em;
left:3em;
width:40em;
height:2em;
}
.nav-footer {
font-family:Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1em;
}
.link-footer a {
color: #F60;
text-decoration: underline;
}
.link-footer a:visited {
color: #F60;
text-decoration: underline;
}
.link-footer a:hover {
color: #900;
text-decoration: underline;
}
Hi everyone, I'm a noob to most of this so take it easy on me. I'm developing a page with a vertically aligned tabber (eventually) full of info. The code I've used was for a horizontally aligned tabber so I read up and changed the CSS to make the thing vertical. I've managed to get it in FF (and chrome and safari) so that the tabbed info div is appearing behind the navigation (which I like and want to keep) but in IE it doesn't stack at all. It re-aligns below the navigation if it's set to any more than pixel wider than the space it's got. If you look at my page in FF and IE http://king-asia.co.uk/test/about.html you'll see what I mean. I figured it should be a z-index trick but nothing I've tried seems to layer the content div and the nav div in IE. I've pasted in my code below. Can anyone spot the error(s)? CSS: Code: .tabberlive .tabbertabhide {
display:none;
border:1px solid #aaa;
width:538px;
height:400px;
position:relative;
float:right;
}
.tabber {
position:relative;
}
.tabberlive {
}
ul.tabbernav
{
margin:0;
padding: 0em;
font: bold 12px Verdana, sans-serif;
position:fixed;
float:left;
z-index:1;
}
ul.tabbernav li
{
list-style: none;
margin-left: 0;
display: block;
position:relative;
text-align:left;
}
ul.tabbernav li a
{
padding: 0.25em;
margin-top: 15px;
text-decoration: none;
display:block;
background: #DDE;
border: 1px solid #778;
}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
{
color: #448;
background: #AAE;
text-decoration:none;
}
ul.tabbernav li.tabberactive a
{
text-decoration:none;
background-color: #fff;
border-right: 1px solid white;
margin-top:15px;
}
ul.tabbernav li.tabberactive a:hover
{
color: #448;
text-decoration:none;
}
.tabberlive .tabbertab {
border:1px solid #aaa;
width:540px;
height:400px;
position:relative;
float:right;
z-index:0;
}
.tabberlive .tabbertab h1 {
display:none;
}
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
Tabber: Code:
<div class="style18" style="background-color:#FFF;">
<div class="tabber" style="background-color:#FFF;">
<!-- History -->
<div class="tabbertab" title="History">
<div class="style18" style="padding:1em; text-align:left;"><h3>History</h3>This is the bit about our company's history. This is the bit about our company's history. This is the bit about our company's history. This is the bit about our company's history.
</div>
</div>
<!-- What We Do -->
<div class="tabbertab" title="What We Do">
<div class="style18" style="padding:1em; text-align:left;"><h3>What We Do</h3><table class="style18" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. passion for good food. This is the bit more about ourrrent projects. This is the bit more about our current projects. </td>
</tr>
</table>
</div>
</div>
<!-- Business Philosophy -->
<div class="tabbertab" title="Business Philosophy">
<div class="style18" style="padding:1em; text-align:left;"><h3>Business Philosophy</h3>This is the bit more about our passion for good food. This is the bit more about our passion for good food. This is the bit more about our passion for good food. This is the bit more about our passion for good food.
</div>
</div>
<!-- Quality Driven -->
<div class="tabbertab" title="Quality Assurance">
<div class="style18" style="padding:1em; text-align:left;"><h3>Quality Assurance</h3>This is the bit more about what we do. This is the bit more about what we do. This is the bit more about what we do. This is the bit more about what we do.
</div>
</div>
</div>
</div>
This is really starting to frustrate after I've spent 2 days solid on it and but cannot get round the problem. Help wold be greatly appreciated. Currently I am building a not for profit food website. An aim of the site is using pure CSS positioning - no tables. The problem I have encountered relates to positioning two images side by with heading text below within a positioned DIV. The screen design can be seen here Note the Recipe box which contains the two images of Hummus and Roast Duck. Getting this into HTML and CSS is proving to be difficult. My efforts can be found here Within the containing DIV I have placed two DIVs to hold each image and eventually the text headers. Code: <div id="SplashContainerLeft"> <h3><a href="#">Recipes</a></h3> <div class="ContainerTest"> <img class="" src="images/recipes/homus.jpg" alt="homus"/> <!-- <p class="SplashImageTitleLeft">Homus</p> --> </div> <div class="ContainerTest" style=""> <img class="" src="images/recipes/roastduck.jpg" alt="roastduck"/> <!-- <p class="SplashImageTitleRight">Roast Duck</p> --> </div> </div> The CSS is as follows Code: #SplashContainerLeft {
border: 2px solid #DFDFFF;
margin-left: 30%;
width: 15%;
}
#SplashContainerLeft h3{
text-align: center;
text-transform: uppercase;
}
#SplashContainerLeft h3 a:hover{
text-decoration: none;
}
.ContainerTest {
border: 1px solid black; /*for testing */
width: 50%;
display: inline;
}
The problem is the width value is ignored when an element is inline. Otherwise this solution would work well. Having two container DIVs would enable the images and headers to be nicely aligned using margin: 0 auto (also not working on the pages at the mo, possible DTD problem) Does anyone have any suggestions? Thanks for anyones help and time in advance.. Even if you just read the post. BuR |
|||||||