|
CSS - Css Relative/absolute Positioning Problem
im creating ajax auto complete text box
but my div tag does not appear correctly in IE7 (ok on firefox) appearing behind the textbox IE7 screen shot URL Firefox screen shot URL codes are HTML Code:
<tr>
<td align="left">PHONE BRAND</td>
<td>:</td>
<td>
<div class="au_cm_loc">
<asp:TextBox ID="txtBrand" runat="server" CssClass="textbox"></asp:TextBox>
<div id="pnlBrand" class="au_cm_pnl"></div>
</div>
</td>
</tr>
<tr>
<td align="left">PHONE MODEL</td>
<td>:</td>
<td>
<div class="au_cm_loc">
<asp:TextBox ID="txtModel" runat="server" CssClass="textbox"></asp:TextBox>
<div id="pnlModel" onmouseout="autoComplete.closeSuggestionPanel(event, this)" class="au_cm_pnl"></div>
</div>
</td>
</tr>
CSS Code:
.au_cm_loc
{
text-align:left;
position:relative;
}
.au_cm_pnl
{
position:absolute;
top:25px;
left:0px;
border:1px solid #39AAE4;
width:204px;
max-height:50px;
overflow-x: hidden;
overflow-y: auto;
visibility:hidden;
background-color:#FEFEFE;
z-index:500;
}
.au_cm_pnl a
{
display:block;
padding:5px 0px;
width:95%;
margin:-7px 0px;
color:Blue;
text-decoration:none;
padding-left:5%;
background-image:url(../Images/textbox_bg.jpg);
}
.au_cm_pnl a:hover
{
background-image:url(../Images/button_bg.jpg);
color:#FFFFFF;
}
please help me to fix this problem thank you chathura Similar TutorialsWhy does GOOD VERSION, below, work perfectly, but the BAD VERSION fails (all browsers)? The only difference is the order of TOPIMAGE and BOTTOMIMAGE in the 2nd IMAGEBUTTON. How can I adjust my CSS so both versions work? GOOD VERSION Code: <style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
BAD VERSION Code: <style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
<img class="TOPIMAGE" src="pics\pic2.jpg" />
</a>
THANKS Hello Can anybody explain me the difference between the absolute and the relative positioning methods? If i use nested <span> elements in a table row which one is suitable? And also what the "Z-index" property tells us? I am so confused with these terms nowadays.And waiting your help. Thank You Very Much... Hi, I'm not sure if this is possible or not, but I can't get it to work accurately, and I wondered if anyone could give me some help. I would like to position a layer at an absolute position (T:128 L:253) which is no problem, but then I would like that layer to have a relative width from that fixed point, expanding/contracting to whatever size the browser is. I've tried several different things, but can't seem to get this particular setup. If I set the width of the layer to 100%, the layer positions itself correctly on the page, but pushes beyond the right hand side of the browser causing a horizontal scroll. Has anyone done this before? Am I missing something critical? or is this impossible to do with layers/css Thank you! Hello, I am trying to absolute position two elements within a relatively positioned DIV. My relatively positioned DIV is necessary to center my content on the page. The elements within this DIV must be placed in the upper left corner of the DIV. The reason why is because I want them to be placed on top of one another. Here is the code I have thus far: <div> <div id="elem1Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem1" src="image1.png" /> </div> <div id="elem2Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem2" src="image2.png" /> </div> </div> Can anyone help me accomplish my goal? For some reason, the second image is always below the first image. In reality I need it right on top of the first image. At the same time, these two images centered in relation to my page. That is why I placed them in a general div element. Thank you! Crystal To design my new site properly I am learning to use CSS for layout. To practice my CSS styling I want my first sample site to have, from top to bottom: 1) a simple centered H1 heading; 2) a CSS-styled drop-down menu bar centered under the heading; and 3) two columns of text (paragraphs). Finally, the footer includes a page hit counter followed by the two W3C gif files (XHTML 1.0 and CSS) in the lower-left and right corners. All together, these pieces should make up a very simple practice page for me (http://stallinswebdesign.com/vs/index.php). However, I cannot find an online tutorial to explain in great detail how to use the position property to put these things where I need them to be. I am getting very frustrated that I can't figure out through trial and error how the absolute and relative values work together to position my stuff the best way on the page. I don't what to write hack CSS. I don't want to "hard code" the whole page with absolute positioning, because it won't scale when font sizes change from visitor to visitor, right? I want to write lean, best-practice CSS. I've concluded that, after reading some online tutorials and perusing the CSS books I've recently bought, I don't have the first clue how absolute and relative positioning work. For example, I can't get that second column of paragraphs to line up alongside the left column unless I apply what looks to me like a CSS hack. Like many examples I've seen online, I'm using the <div> tag to wrap multiple pieces of data together so that I can apply styling (especially positioning) to them as a whole. In particular, the left column paragraphs are wrapped in <div id="contentLeft">, and the right column paragraphs are wrapped in <div id="contentRight">, and both together are surrounded by parental <div id="content"> tags. Still, it takes a lot of pain for me to style those three id's in the CSS file so that the two columns appear where I want them. And don't even ask me about what should be a simple footer placement! I can't get the hit counter paragraph and those two W3C images to get to the bottom of the page without absolute positioning. But when I do that, they don't scale up or down automatically as the amount of text in those two columns increases or decreases. Can you please glance at my .css and .htm files below and tell me where I'm going wrong? More importantly (teaching me to fish and not just feeding me fish :-) ) can you point me to an online or printed resource that goes into great detail explaining the uses of the position property? This is so not like tables :-D Thank you for your time and advice. Curtis my content CSS file (no menu stuff): Code:
body {
font: 100%/1.4 arial, helvetica, serif; background-color:#fff;
text-align:left; padding:0px; margin:0em; width:64em;}
#homeTitle {
position:absolute; font-size:2.0em;
background-color:#f5f8ec; color:green; letter-spacing:0.3em;
margin: 0em 0em .1em 1em;}
p {
background-color:#fff5e8;}
#bannerRight {
position:absolute; z-index:2; top:7em; left:29em;
background-color:#fff;}
#content {
position:absolute; width:45em; border:dotted 1px red;
margin-left:9em; margin-top:19em;}
#contentLeft {
position:relative; margin-left:0.5em; margin-right:24em;
border:dotted 1px blue;}
#contentRight {
position:relative; margin-top:-78.5em; margin-left:24em;
margin-right:0.5em; border:dotted 1px fuchsia;}
#counter {
position:relative; top:1.5em; border:dotted 1px gray;}
#W3C_boxes {
position:relative; margin-top:6.5em;}
#W3C_css {
display:inline; padding-left:48em;}
img {
border:0px;}
my sample web page: 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" lang="en" xml:lang="en">
<head>
<title>
Valley Spokesmen Bicycle Touring Club
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="The Valley Spokesmen Bicycle Touring Club, for bicycle enthusiasts of all ages, is based in Dublin California and hosts dozens of club rides each month, both local and afar, ranging from 15-mile cruises to 100-mile epics!" />
<meta name="keywords" content="Valley Spokesmen, Cinderella Classic, valley spokesman, cinderella ride, cinderella century, valleyspokesmen bike club, valleyspokesmen, cinderella bike ride, cinderella classic bike ride, cinderella ride california, cinderella bicycle ride, valley spokesmen bike club, valleyspokesmen.org, cinderella bike, bike club san francisco" />
<script type="text/javascript" src="js/formEmailValid.js"></script>
<script type="text/javascript" src="js/newWindow.js"></script>
<script type="text/javascript" src="js/newWindow_2.js"></script>
<script type="text/javascript" src="js/linkExternal.js"></script>
<script type="text/javascript" src="js/navDrop.js"></script>
<link rel="shortcut icon" href="ico/favicon.ico" />
<link rel="icon" href="images/animated_favicon1.gif" type="image/gif" />
<link rel="stylesheet" type="text/css" href="css/siteWide.css" />
<link rel="stylesheet" type="text/css" href="css/menus.css" />
</head>
<body>
<h1 id="homeTitle">Valley Spokesmen Bicycle Touring Club</h1>
<div id="container">
<ul id="nav">
<li><a href="#">Home</a> <!-- first dropdown -->
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">About Our Club</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a href="#">Events</a> <!-- second dropdown -->
<ul>
<li><a href="#" class="topDrop">Cinderella Classic</a>
<ul>
<li><a href="#">Training Schedule</a></li>
</ul>
</li>
<li><a href="#" class="topDrop">TOSRD</a>
<ul>
<li><a href="#">Registration Form</a></li>
</ul>
</li>
<li><a href="#">Clinics</a></li>
</ul>
</li>
<li><a href="#">Favorites</a> <!-- third dropdown -->
<ul>
<li><a href="#">Ride Calendar</a></li>
<li><a href="gallery.php" class="topDrop">Photo Gallery</a>
<ul>
<li><a href="gallery_2008.php">2008 Photos</a></li>
<li><a href="gallery_2007.php">2007 Photos</a></li>
<li><a href="gallery_2006.php">2006 Photos</a></li>
<li><a href="gallery_2005andEarlier.php">2005 and Earlier</a></li>
</ul>
</li>
<li><a href="#">Local Bike Shops</a></li>
<li><a href="#">Favorite Links</a></li>
<li><a href="#">West Coast Rides</a></li>
<li><a href="#">BikeJournal.com</a></li>
</ul>
</li>
<li><a href="#">Downloads</a> <!-- third dropdown -->
<ul>
<li><a href="#">Membership App</a></li>
<li><a href="#">For New Members</a></li>
<li><a href="#">Club Newsletters</a></li>
<li><a href="#">Rules of the Road</a></li>
<li><a href="#">New Ride Leaders</a></li>
<li><a href="#">Club Ride Waiver</a></li>
</ul>
</li>
<li><a href="#">Grab Bag</a> <!-- third dropdown -->
<ul>
<li><a href="#">Bike Routes</a></li>
<li><a href="#">Route Ratings</a></li>
<li><a href="#">Club Clothing</a></li>
<li><a href="#">VS E-Mail List</a></li>
<li><a href="#">VS Race Team</a></li>
</ul>
</li>
</ul>
</div>
<p id="bannerRight">
<?php
$bannerPhoto_array = file('random/bannerArrayPhotos.txt'); // Get photos into an array from the text file using file()
$quote3 = $bannerPhoto_array[rand(0, count($bannerPhoto_array) - 1)]; // Randomly pick one element of the array
$quote3 = trim($quote3);
echo "$quote3";
?>
</p>
<div id="content">
<div id="contentLeft"><!-- begin left-side content -->
<p>
<script type="text/javascript">
<!-- hide from archaic browsers...
// greeting for home page
function dayPart( ) {
var oneDate = new Date( );
var theHour = oneDate.getHours( );
if (theHour < 12) {
return "morning";
} else if (theHour < 17) {
return "afternoon";
} else {
return "evening";
}
}
document.write("<p class=\"homeWelcome\">Good " + dayPart( ) + ", and welcome!</p>");
// end hide -->
</script>
</p>
<noscript>
<p>
Welcome!
</p>
</noscript>
<p class="">
From our President:
</p>
<p class="">
Happy New Year! This is the season to renew, reflect and recover. I trust that your new year brings a renewed interest in biking,
fitness and adventure. I can assure you that the new leadership team of the Valley Spokesmen Bicycle Touring Club
has all of these interests in mind as we enter our new jobs working for you.
</p>
<p class="">
But first I would like to recognize Susan Gibbs and her team for their contributions over the past year.
They made a significant contribution to the club and bicycling in our community during the past year.
I want to say thank you on behalf of the entire club for their service.
</p>
<p class="">
Our new leadership team includes Vice-President Mark Dedon; Treasurer Bill Well; Corresponding Secretary Bonnie Powers;
Recording Secretary Kim Autrey; Race Team Representative Bob Fusco; Newsletter Editor Marcia Seeger; TOSRD Chairperson
Francie Cushman; Newsletter Publisher Mary Murphy; and Ride Chairpersons Curtis Stallins and Peter Rathmann. Each of us
appreciates the confidence that you entrusted in us to serve you during 2008.
</p>
<p class="">
We plan on beginning our year by reflecting on what the state of governance of the club is to assure we have a solid
path forward. That includes updating the club’s by-laws, seeking professional help to deal with our fiduciary
responsibility of managing our club’s money, and aligning our responsibilities on the leadership team. Of course,
we need everyone to support Bob, Bonnie and Jim in organizing the events that make up the Cinderella Classic during the
weekend of April 4-6, 2008. Please save the dates. But most of all, we need you to ride with us.
</p>
<p class="">
I look forward to meeting every one on a ride during the coming year and greeting you at the Mid-winter party on
February 9, 2008. The location is the same as last year, however the hotel has a new name: Pleasanton Plaza by Marriott’s
(formerly Crowne Plaza). Make your reservation today!
</p>
<p class="">
Have a great ride today and every day.
<br />
<span class="bold">- Jim Kohnen</span>
</p>
</div> <!-- end left side content -->
<div id="contentRight"> <!-- begin right-side content -->
<p class="">
Want to earn some free V.S. gear? Look at all the cool
<a href="javascript:newWindow_2('rideLeaderAwards.htm')">
Valley Spokesmen clothing</a> you can earn just by leading some rides each year!
</p>
<p class="size12px">
<?php
echo "<span class=\"cheers\">Cheers from the Valley Spokesmen!</span><br />";
$cheers_array = file('random/cheersQuotes.txt'); // Get quotes into an array from the text file using file()
$quote2 = $cheers_array[rand(0, count($cheers_array) - 1)]; // Randomly pick one element of the array
$quote2 = trim($quote2);
echo "$quote2"; // Echo results.
?>
</p>
<p class="">
<span class="boldOrange">New Members</span> - get up to speed quickly! Download and browse through our
<a href="pdfFiles/0712_New_Member_Booklet.pdf" rel="external">New Member Handbook</a>.
</p>
<p class="">
<span class="boldOrange">
Not sure what "Car up!" means?
</span>
<br />
Read over our new
<a href="pdfFiles/0712_Bike_Rules_Of_The_Road.pdf" rel="external">Rules of the Road</a>.
</p>
<p class="">
<span class="boldOrange">How easy is it to lead a ride?</span>
Find out how much fun it can be when you look through our new
<a href="pdfFiles/0712_Becoming_A_Ride_Leader.pdf" rel="external">Ride Leader Guide</a>!
<br />View our <a href="javascript:newWindow_2('rideLeaderAwards.htm')" style="font-size:16px">Ride
Leader Awards</a> program!
</p>
<p class="">
<span class="boldOrange">
YES! - it’s Winter!
</span>
<br />
Which are you most looking forward to?
<br /> - <span class="boldBold">Scraping ice from your windshield
<br /> - Valentine’s card shopping
<br /> - Cycling through a crisp winter day</span>
<br />We knew it! You ought’a join the Valley Spokesmen and savor some beautiful winter riding,
so check our <a href="vsCalendar/month.php" rel="external">ride calendar</a> for dates that look the most
fun to you.
</p>
<p class="">
<span class="boldOrange">
Rides For The Rest Of Us</span>
<br />
If you want to start riding casually and make new friends who share your
interests, then you should join us on our <!-- <a href="rides.html#newbie">newbie rides</a> -->
shorter rides. We offer at least two rides a month for people just like you! Check the
<a href="vsCalendar/month.php" rel="external">ride calendar</a> and see how many rides suit you!
<br />
</p>
<p class="">
<span class="boldOrange">
Join the Club!
</span>
<br />
For a few dollars a year you get all this:<br />
- Monthly newsletter packed with info<br />
- A map to local pubs and coffee shops<br />
- Tons of advice on bicycle repair<br />
- Discounts in local bike shops<br />
- All the new friends you can handle!<br />
Mail <a href="pdfFiles/membershipApp.pdf" rel="external">your application form</a> today!
</p>
<p class="">
<span class="boldOrange">
Ride in style
</span>
<br />
View <a href="clothing.php">clothing information</a> online. Send an e-mail to Jim Duncan if you
are interested in club jerseys, shorts, socks, vests, jackets, etc. His address is hey-you at comcast dot net.
</p>
</div> <!-- end right-side content -->
</div><!-- end two columns of content; begin counter and footer -->
<div id="counter">
<p>
Visitors to our site since November 14, 2006: <img src='http://counter.dreamhost.com/cgi-bin/Count.cgi?df=cstallins-VScounter.dat&pad=F&ft=0&dd=odb&istrip=F' alt="Our page hit counter is over a million for the year!" />
</p>
</div> <!-- end counter; begin footer -->
<div id="W3C_boxes">
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/">
<img id="W3C_css" style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-css-blue" alt="Valid CSS!" /></a>
</div>
</body>
</html>
I was under the understanding that an element positioned absolutely is positioned in context to the closest parent object that has positioning of absolute or relative, and barring that, the body. I have quite simple code: html4strict Code: Original - html4strict Code <div style="position:relative; height:50px; width:250px; background:#69c;"> <input type="text" style="position:absolute; top:5px; left:0; right:0;"> </div>
I would expect this to be top-aligned with 5 pixels of blue showing, and stretched the width of the containing div, but it's not. It's the correct height from the div but not the sides of the container - can anyone tell me why that is, or what should be done ( short of width:100%; )? Thanks, Brett greetings. i have a small problem. i have a relatively positioned layer and an absolutely postioned layer. i want the rel layer to appear visually below the absolute layer. i'm not referring to z-index. simply i have a header layer and content layer. the header is absolute and the content is relative, BUT IE6 is demanding that in my code, i put the content first and header second. also if I drop the width property from the content/relative layer IE6 will allow me to have the absolute layer ontop of the relative layer in my markup. examples to be viewed in IE6 win. appears proper but was coded backwards Page appears correct, Header on top, content below BUT in the code the layers are in the wrong order. Coded in correct order but margin ignored Here the layers are coded with top layer first and bottom layer second. IE drops the top margin of the content layer and rams it to the top of the page. THIS IS THE PROBLEM Coded in correct order but i dropped the width attribute In this example the layers are coded in the proper order and they display properly but only if i remove the width attribute from the relatively positioned layer. i would appreciate any help. the page i'm working on is much more complex so although i can get both browsers to display properly, i don't like having the code for my navigation at the bottom of the page. thanks alot! carl Hi folks, Just got one of those "can I or can't I" questions that relates to position:relative and position:absolute. I have the following structure - Code: <div>
<div style="position:relative">
<ul style="position:relative">
<li>
<p>
<span style="display:block"></span>
<span style="display:block"></span>
<span style="display:block; position:absolute"></span>
</p>
</li>
</ul>
</div>
</div>
The Third Span is where I am not sure about. I'd like it to sit at the bottom right of the enclosing <p>. When I use <span style="display:absolute; bottom:2px; right:2px>, the whole span disappears - not exactly sure where it vanishes to. Without the bottom and right declarations, the span stays put. There is sufficient space within the <p> for the <span> to move about. This absolute positioning worked fine without the relative div and relative ul - so I am assuming that's where my issue lies. BUT, I need the outer structure and it's not an option to change anything except the third <span>. Question is: Is what I am attempting going against the grain and something that just isn't going to work? If so, what steps can I take to position the contents of the <span> where I need it? I have tried making the <span> fit the width of the <p> and then positioning the internal contents to text-align:right. I can't do a padding-top or margin-top as the content in the second span is variable. Any clever ideas? I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. Hi - I am using HVMENU from dynamicdrive.com. I have set this up to use relative positioning with the menu using the horizontal format. The code in my html file is: Quote: <div id="MenuPos" style="position:relative; width:750px; height:20px;"><img src="images/redspacer.gif" width="750" height="20" alt=""></div> This all lines up and works correctly using IE6. I have a problem when using firefox. If I set var MenuCentered='center' in the script file the menu is misaligned by about 10 - 20 pixels to the left on a page when there is a scroll bar on the side of the firefox browser. It works ok on short pages that do not have a scroll bar. If I set var MenuCentered='left' in the script file the problem is reversed in regard to the scrollbar. Have I overlooked anything? Is there anything I can do to correct this using CSS? IE absolutely sucks (pun intended). Or mayhaps its the developer. In any case: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#top_main_content { width: 955px; }
#top_main_content ul {
float: left;
list-style-type: none;
border-spacing: 0;
margin: 0;
padding: 0;
text-align: right;
border-top: 1px solid #f1f1f1;
height: 243px;
width: 266px; } /* end #top_main_content ul */
#top_main_content ul li {
vertical-align: middle;
margin: 0;
padding: 0;
border: 0;
color: #686868;
width: 266px;
border-bottom: 1px solid #f1f1f1; } /* end #top_main_content ul li */
#top_main_content ul li a {
line-height: 26px;
display: block;
margin-right: 5em;
color: #686868;
width: 266px; } /* end #top_main_content ul li a */
.indent { padding-right: 1.5em; }
#top_main_content ul li a:hover {
background: #cfcf00;
color: #000000; } /* end #top_main_content ul li a:hover */
#top_main_content #rotating {
float: right;
width: 687px;
height: 242px;
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #f1f1f1;
text-align: right; } /* end #top_main_content img */
#default_div {
position: absolute;
visibility: visible; } /* end #default_div */
#div_a {
position: absolute;
visibility: hidden; } /* end #div_a */
#div_b {
position: absolute;
visibility: hidden; } /* end #div_b */
#div_c {
position: absolute;
visibility: hidden; } /* end #div_c */
#div_d {
position: absolute;
visibility: hidden; } /* end #div_d */
#div_e {
position: absolute;
visibility: hidden; } /* end #div_e */
#div_f {
position: absolute;
visibility: hidden; } /* end #div_f */
#div_g {
position: absolute;
visibility: hidden; } /* end #div_g */
#div_h {
position: absolute;
visibility: hidden; } /* end #div_h */
#div_i {
position: absolute;
visibility: hidden; } /* end #div_i */
</style>
</head>
<body>
<div id="logo_search">
<div id="logo_container">
</div>
</div>
<div id="base">
<div id="main_block">
<div id="main_content">
<div id="top_main_content">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
<div id="rotating">
<div id="default_div"><img src="images/test_image_main.gif" alt="" /></div>
<div id="div_a"><img src="images/test_image_a.gif" alt="" /></div>
<div id="div_b"><img src="images/test_image_b.gif" alt="" /></div>
<div id="div_c"><img src="images/test_image_c.gif" alt="" /></div>
<div id="div_d"><img src="images/test_image_d.gif" alt="" /></div>
<div id="div_e"><img src="images/test_image_e.gif" alt="" /></div>
<div id="div_f"><img src="images/test_image_f.gif" alt="" /></div>
<div id="div_g"><img src="images/test_image_g.gif" alt="" /></div>
<div id="div_h"><img src="images/test_image_h.gif" alt="" /></div>
<div id="div_i"><img src="images/test_image_i.gif" alt="" /></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In any case what will happen with this code is when a user rolls over a link (not shown in code), the visibility of the corresponding div will change. All of this renders and works correctly in FireFox, Opera, and Safari. In IE 7 and 6, it works correctly, but does not render correctly. In IE 7, the images (all 687 x 243) seem to be indented 687 pixels. In IE 6, there is a lot of trailing border in the links and that is pushing the images below the menu and will then probably have the same problem IE 7 is having. Thoughts? Edited to add that I solved the IE 7 problem by removing text-align: right; from the #top_main_content #rotating div. I still have the IE6 problem however. I am working on a site laid out with divs. I am having trouble with one in particular: shopping basket div. If you go to http://www.refinethetaste.com/html/ At the header section you will see a shopping basket right on top of the logo. I want it stand on the navigation section but I want it float to right. I have tried several different things with its positioning, I just cant get it right. Ok, ive got the footer bar that should be at the bottom of content, in FF it displays perfect, but in IE it disappers http://fasttracksites.com/new%20layout/ heres the css Code:
html, body {height: 100%;}
body {
background: #beb185 url('images/bggrad.gif');
background-attachment: fixed;
font-family: Helvetica, Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
line-height: 16px;
color: #000;
padding: 0px;
margin: 0px;
text-align: left;
}
/*==============================
Layout
==============================*/
div#container {
background: #fff;
width: 961px;
height: 100%;
margin: 0px;
padding: 0px;
text-align: left;
float: left;
z-index: 1;
}
div#page {
height: 100%;
float: left;
z-index: 2;
}
#left-col {
background: #121212 url('images/leftcolgrad.jpg');
color: #fff;
width: 190px;
min-height: 100%;
height: 100%;
padding: 0px 5px 0px 5px;
border-right: 10px solid #13496e;
float: left;
z-index: 3;
}
#right-col {
color: #000;
width: 750px;
height: 100%;
padding: 0px;
border-right: 1px solid #121212;
float: right;
z-index: 4;
}
div#header {
background: #fff;
width: 740px;
height: 78px;
margin: 0px;
padding: 0px 5px;
text-align: left;
float: left;
z-index: 5;
}
div#content {
background: #fff;
width: 740px;
padding: 0px 5px 0px 5px;
float: left;
clear: both;
z-index: 6;
}
div#footer {
position: absolute;
bottom: 0px;
background: #000 url('images/footergrad.jpg');
width: 740px;
height: 180px;
padding: 0px 5px 0px 5px;
float: left;
/*clear: both;*/
z-index: 7;
}
K...I have an absolutely positioned toolbar in a search tool page. There are instances where the toolbar (on the left) is longer than the actual (non-absolute) results. When this happens, IE refuses to scroll for the absolutely positioned content! Anyone know what I can do about this? It's a little...crappy. MPEDrummer I want to set up a table so that error messages appear directly above specific table columns in the form of a div tag with a red background and the same width as the column. To do this I've added a div tag inside the <th> element of the table, with the display property set to 'none'. Code: <th> <nobr>Header Content</nobr> <div id="error_message">Error Message</div> </th> When I want to display an error message above the table I use the following styles on the div tag Code:
background-color: #ffcccc;
width: 100%;
position: relative;
left: 0px;
top: -100px;
z-index: 1;
display: block;
It displays the div tag above the header like I want, but it still stretches the height of the <th> element as if it was still contained inside of it. How do I do this without stretching the cell height? Hi All- For some reason when I use a bunch of DIV tags to position elements on my page, the page keeps getting longer and longer with white space. Does anyone know what will remedy this extra whitespace? Thanks, infinity003 I am trying to make a layout with a background image with 3 content boxes layered on top of it. The first two boxes are position correctly. They are offset top, left and top, right respectively. The third box should be positioned bottom, left but for some reason it isn't working. The left offset is working correctly, but instead of positioning itself off of the bottom of the container div, it positions itself that much above the viewport. If I set the bottom property to negative something, it acts like a top offset. While this is a workaround, it does not provide acceptable functionality. Anyone have any ideas? I've had two friends who are both seasoned web developers look at this and they were both stumped. I can post images of what it looks like and what it should look like if desired. Both of these code sections are php generating the html and css respectively. html: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title><?=$title?></title>
<link rel="stylesheet" type="text/css" href="./themes/<?=$theme?>/css/main.php" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#bottom_ccw").attr({ scrollTop: $("#bottom_ccw").attr("scrollHeight") });
});
</script>
</head>
<body>
<div id="wrapper">
<div id="inner_wrapper">
<div id="background"></div>
<div id="left_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="l_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="l_border_l"></div>
<div id="l_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="l_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="left_ccw">
<div id="cc1">
<?for($i=0;$i<500;$i++):?>1 <?endfor;?>
</div>
</div>
<div id="right_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="r_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="r_border_l"></div>
<div id="r_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="r_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="right_ccw">
<div id="cc2">
<?for($i=0;$i<1200;$i++):?>2 <?endfor;?>
</div>
</div>
<div id="bottom_bw">
<div class="top_b">
<div class="border_tl"></div>
<div id="b_border_t"></div>
<div class="border_tr"></div>
</div>
<div>
<div id="b_border_l"></div>
<div id="b_border_r"></div>
</div>
<div class="bot_b">
<div class="border_bl"></div>
<div id="b_border_b"></div>
<div class="border_br"></div>
</div>
</div>
<div id="bottom_ccw">
<div id="cc3">
<?for($i=0;$i<200;$i++):?>3 <?endfor;?>
</div>
</div>
</div>
</div>
</body>
</html>
css: css Code: Original - css Code <? header("Content-type: text/css"); ?> <? //Left content box width. $lcbw = 300; //Left content box height. $lcbh = 443; //Left content box horizontal offset. $lcbho = 100; //Left content box vertical offset. $lcbvo = 55; //Right content box width. $rcbw = 550; //Right content box height. $rcbh = 550; //Right content box horizontal offset. $rcbho = 100; //Right content box vertical offset. $rcbvo = 55; //Bottom content box width. $bcbw = 300; //Bottom content box height. $bcbh = 100; //Bottom content box horizontal offset. $bcbho = 100; //Bottom content box vertical offset. $bcbvo = 0; ?> /* Equalize the padding and margin for all elements across all browsers. */ * { padding: 0px; margin: 0px; } /* Generic top section for a content box. */ .top_b { clear: right; } /* Generic bottom section for a content box. */ .bot_b { clear: left; } /* Top left corner of a border. */ .border_tl { float: left; background: url('../images/main/border_tl.png'); width: 26px; height: 25px; } /* Top right corner of a border. */ .border_tr { float: left; background: url('../images/main/border_tr.png'); width: 26px; height: 25px; } /* Bottom left corner of a border. */ .border_bl { float: left; background: url('../images/main/border_bl.png'); width: 26px; height: 25px; } /* Bottom right corner of a border. */ .border_br { float: left; background: url('../images/main/border_br.png'); width: 26px; height: 25px; } /* Main site wrapper. */ #wrapper { margin: auto; width: 1057px; padding-top: 5px; } /* Main site inner wrapper. */ #inner_wrapper { position: relative; } /* The background element. */ #background { background: url('../images/main/background.png'); width: 1057px; height: 679px; position: absolute; z-index: 1; } /* Left content box borders wrapper. */ #left_bw { position: absolute; z-index: 2; top: <?=$lcbvo?>px; left: <?=$lcbho?>px; width: <?=$lcbw?>px; height: <?=$lcbh?>px; } /* Left content box top border. */ #l_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content box left border. */ #l_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box right border. */ #l_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($lcbh-50)?>px; } /* Left content box bottom border. */ #l_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($lcbw-52)?>px; height: 14px; } /* Left content container wrapper. */ #left_ccw { position: absolute; z-index: 3; top: <?=($lcbvo+14)?>px; left: <?=($lcbho+14)?>px; width: <?=($lcbw-28)?>px; height: <?=($lcbh-28)?>px; overflow: hidden; } /* Left content container. */ #cc1 { padding: 5px; } /* Right content box borders wrapper. */ #right_bw { position: absolute; z-index: 2; top: <?=$rcbvo?>px; right: <?=$rcbho?>px; width: <?=$rcbw?>px; height: <?=$rcbh?>px; } /* Right content box top border. */ #r_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content box left border. */ #r_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box right border. */ #r_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($rcbh-50)?>px; } /* Right content box bottom border. */ #r_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($rcbw-52)?>px; height: 14px; } /* Right content container wrapper. */ #right_ccw { position: absolute; z-index: 3; top: <?=($rcbvo+14)?>px; right: <?=($rcbho+14)?>px; width: <?=($rcbw-28)?>px; height: <?=($rcbh-28)?>px; overflow: hidden; } /* Right content container. */ #cc2 { padding: 5px; } /* Bottom content box borders wrapper. */ #bottom_bw { position: absolute; z-index: 2; bottom: <?=$bcbvo?>px; left: <?=$bcbho?>px; width: <?=$bcbw?>px; height: <?=$bcbh?>px; } /* Bottom content box top border. */ #b_border_t { float: left; background: url('../images/main/border_top.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content box left border. */ #b_border_l { float: left; background: url('../images/main/border_left.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box right border. */ #b_border_r { float: right; background: url('../images/main/border_right.png'); width: 14px; height: <?=($bcbh-50)?>px; } /* Bottom content box bottom border. */ #b_border_b { margin-top: 11px; float: left; background: url('../images/main/border_bottom.png'); width: <?=($bcbw-52)?>px; height: 14px; } /* Bottom content container wrapper. */ #bottom_ccw { position: absolute; z-index: 3; bottom: <?=($bcbvo+14)?>px; left: <?=($bcbho+14)?>px; width: <?=($bcbw-28)?>px; height: <?=($bcbh-28)?>px; overflow-x: hidden; overflow-y: scroll; } /* Bottom content container. */ #cc3 { padding: 5px; }
Sorry I tried to get the HTML to highlight too but it wouldn't work. Screenshot of how it looks: http://i34.photobucket.com/albums/d105/alphasynaptic/wrong.jpg Screenshot of how it should look (done with my hacky workaround): http://i34.photobucket.com/albums/d105/alphasynaptic/right.jpg Hello, I have this arrow icon at the end of each <li> that is floated right. When the user clicks on it, he gets a dropdown list with options. I'm just having some trouble positioning it. here is the screenshot of before and after the user clicks the arrow icon: Here is the HTML that I am using to place it: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a></li>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</ol>
I also tried encapsulating the <div> whithin the <li> in hopes that it would only affect that item like this: Code: <ol>
<li><a class="control" href="javascript:toggleLayer('controlgroup01');"> </a><a href="">System Executive Summary</a>
<div class="controlgroup" id="controlgroup01">
<a href="#">1</a><br />
<a href="#">2</a><br />
<a href="#">3</a><br />
<a href="#">4</a><br />
</div>
</li>
</ol>
Here is the CSS I am using to position the above <div> (which is invisible at first): Code: .control
{
float: right;
border: 0px solid #000000;
border-left: 1px dotted #cccccc;
padding: 0px;
padding-left: 8px;
margin: 0px;
margin-left: 8px;
background-repeat: no-repeat;
background-position: 100% 50%;
text-decoration: none;
}
.controlgroup
{
display: none;
/* position: relative; */
/* left: 70em; */
border: 1px solid #fddc9a;
background-color: #fff3ce;
float: right;
}
.controlgroup a
{
padding: 4px 4px 4px 24px;
background-image: url(bulletarrow.bmp); /* Photoshop this into transparent GIF */
background-repeat: no-repeat;
background-position: 4px 50%;
}
I can't really use position: absolute; because depending on how the user resizes the browser, the box will be in a different place as it is supposed to be right justified, not left. It can't be positioned the way it is b/c the items below it bump into it and get schootched over to the side. I wish there was some waay to do this. Does anybody know? Thanks |
|||||||