|
CSS - Ie Misplacing Stacked Images
edit: posted this question at the end of the working day, was quit tired. basically i was having trouble vertically spacing images in a menu whilst simultaneously aligning text labels to the middle of those images...
Similar TutorialsIs there a way to create a simultaneous effect of both linking and onmouseover for two different layers that are stacked in the same position? Meaning ... I have LAYER 1 which would have the "initial image" and the "hot text" that would trigger a rollover (onmouseover) effect for the "new image" to repopulate the same position but in the same or "new" div ... onmouseout, the "new image" would hide and the "initial image and "hot text" div content would reappear ... I've attempted something of what I wanted, but am still having issues. Any assistance you can provide would be greatly appreciated -- THANKS! Code: <html>
<head>
<title></title>
<style type="text/css">
.hidden {position: absolute; visibility: hidden}
#netcalltext
{
z-index: 1;
position: absolute;
top: 2px;
left: 2px;
}
#d1
{
z-index: 2;
position: absolute;
top: 2px;
left: 2px;
}
</style>
<script language="JavaScript">
<!--
function showIt(obj) {
if (document.getElementById)
{document.getElementById("d1").style.visibility = "visible";}
else
{if (document.layers)
{
document.layers[obj].visibility = "show";}
else
{document.all("d1").style.visibility = "visible";}
}
}
function hideIt(obj) {
if (document.getElementById)
{document.getElementById("d1").style.visibility = "hidden";}
else
{if (document.layers)
{
document.layers[obj].visibility = "hide";}
else
{document.all("d1").style.visibility = "hidden";}
}
}
//-->
</script>
</head>
<body>
<div id="d1" class="hidden"><img src="images/tools-on.jpg" alt="" width="194" height="280" border="0"></div>
<div id="netcalltext"><a href="#" onMouseOver="showIt('d1')" onMouseOut="hideIt('d1')"><img src="images/tools-off.jpg" alt="" width="194" height="280" border="0"></a></div>
</body>
</html>
I couldn't really figure out what keywords to be searching for... I am more than happy to read a previous post if anyone could direct me. Here's my problem: Attempting to layout a page using divs and no tables. I have a stylized left-side border that I have to use, and I would like it to stretch. It a symmetrical drawing, so I cut it in half in Photoshop, and then saved a 1 pixel slice from the center as a third picture. (So I now have 3 images: one for the top, middle, and bottom) The Top and Bottom images should stay the same height, and the Middle image will be repeated to make the border stretch with the window. My div layout is as follows: <div id="divTopLeft" style="top:0em;left:0em;position:absolute;display:block;background-image:url('images/bg_TopLeft.gif');background-repeat:no-repeat;height:300px;width:151px;z-index:0;"> </div> <div id="divMiddleLeft" style="top:300px;bottom:300px;left:0em;position:absolute;background-image:url('images/bg_MiddleLeft.gif');background-repeat:repeat-y;width:151px;z-index:0;"> </div> <div id="divBottomLeft" style="bottom:0em;position:absolute;left:0em;vertical-align:bottom;display:block;background-image:url('images/bg_BottomLeft.gif');background-repeat:no-repeat;height:300px;width:151px;z-index:0;"> </div> This works great as long as the window is at least 600 pixels high. If the window becomes shorter than that, "divBottomLeft" overlaps "divTopLeft" (and maybe Middle as well, but I can't tell). I thought that specifying the same z-index would make them run into each other instead of overlapping, but no such luck. Can anyone help? Thank you! -jim Hi there. A very frustrating problem and so simple a situation . I have two divs, one stacked on top of the other. Nothing special with positioning or anything. Total barebones stuff. If I put an image (whether with image tag or as background-image) in the top div, the div will be padded on the bottom. This only happens in IE. As an example I have my page he URL The top div bgcolor is lime green, and you'll see it adds some extra space under the image. Compare in IE & FireFox and you'll see what I mean - green can be seen under the image in IE. The bottom of the image in the top div should be butted up against the top of the second div, whose bgcolor is red. No green should exist between the image and red. Thanks for any help, this should be rediculously simple for someone who knows CSS quirks well. page passed validation - xhtml 1.0 @ w3c.org Is there a way to get the #middle div to stretch vertically to fill up the remaining space of the page, say with min-height etc.? Thanks, Mark Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html,body{
min-height:100%;
height: 100%;
}
html{
border: 1px solid red;
}
body{
border: 1px solid blue;
}
#container{
border: 1px solid green;
}
#top{
border: 1px solid yellow;
}
#middle{
border: 1px solid black;
min-height: 100%;
height: auto;
}
#bottom{
border: 1px solid grey;
}
</style>
</head>
<body>
<div id="container">
<div id="top"> </div>
<div id="middle"> </div>
<div id="bottom"> </div>
</div>
</body>
</html>
I should preface this by stating that I'm hopelessly bad at CSS! I have a bit of ajax-enabled html like this: Code: <div class="demo">
<div class="demo-description">
<p>Vault</p>
</div>
<ul id="sortable1" class="connectedSortable">
<li id="entry_1" class="ui-state-default ui-state-disabled"><img src = "img/1.jpg"></li>
</ul>
<div class="demo-description">
<p>Gallery One</p>
</div>
<ul id="sortable2" class="connectedSortable">
<li id="entry_4" class="ui-state-default"><img src = "img/4.jpg"></li>
<li id="entry_2" class="ui-state-default"><img src = "img/2.jpg"></li>
</ul>
<div class="demo-description">
<p>Gallery Two</p>
</div>
<ul id="sortable3" class="connectedSortable">
<li id="entry_3" class="ui-state-default"><img src = "img/3.jpg"></li>
<li id="entry_5" class="ui-state-default"><img src = "img/5.jpg"></li>
</ul>
</div><!-- End demo -->
I want to format it such that while images [<li></li>] within galleries [<ul></ul>] appear side by side, the actual galleries appear one below the other. Just can't seem to figure it out. Edit: Nevermind. As soon as I posted, I discovered what I needed was "overflow: auto;" Isn't it always the way. Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag? Hi, I can't believe I'm posting this but I can't seem to get this to work. I cannot load a background image through a simple div tag. It works if I switch the id selector to the BODY tag in my code and displays the image but does not work if I use the selector with the DIV tag. I have no idea why. Please help My HTML file Quote: <!DOCTYPE html> <html> <head> <title>Title of the document</title> <LINK REL=StyleSheet HREF="styles.css" TYPE="text/css"> </head> <div id="header"> Div Tag here </div> <body> The content of the document...... </body> </html> My CSS file Quote: #header { background-image: url(navtext.png); background-image: no-repeat; } Use any image you have to test. hey guys.. I was thinking about changing my site from being mostly table based for the layout to css based but for some reason theres a small gap between images in IE... no gap in FF though.. I made two example pages 1 without using images, and just a colored background, and one with images... the height and width for the backgrounds and for the images are both the same. small gap at the bottom of each of the divs after the image ends. www.wmbclan.com/test.php just some background colors.. without any gap between the colors. www.wmbclan.com/test2.php anyone know how to fix this? I'm trying to get the 2 tabs of this mini calendar to be right next to each other. I've changed the names of all the divs surrounding the images and still can't get it to take out that padding. I've also tried img { margin:0px; padding:0px; } and it still doesn't work. Any ideas? i can only find the script to show background images in a css style sheet..but how would I go about for example showing an image not as background? i have style switcher, but I'm wanting to use buttons aswell for example blue.gif and red.gif using 2 different styles. how would I show the image in css?, which I can also put a link on maybe in the html or css? HElP! thanks Hello all I am putting together a design based almost entirely on ems, so that if text-size is altered, line-length will remain consistent. Obviously, images are by definition of pixel dimension, so they would not enlarge or contract in the same way when the text size is changed. How about enclosing images in DIVs of em dimensions, clipped. Would that mean that, as the text size is increased, the DIV would keep its relative size in the design, and more of it would be revealed? Has anyone tried this? Thanks Tom Alright, this seems to be tricky, but here's the story: I've got a photography gallery I made for a friend, and the last thing that needs to be taken care of is cross-browser compatability. I'm down to one problem of image resizing for thumbnails in IE. I've seen a few solutions, but none of them seem to work, so maybe I'm just doing things wrong, but then again no site has talked about resizing both horiz. and vert. For the site, any image thrown on the page needs to be resized to no greater then 105x100. But please, don't tell me to use PHP for this - I'm very attached to the fact that the entire site weighs in at under 300 lines. Thanks, Brian Ziemek in IE the hourglass flickers...so i need to put a image on it and stuff......should i just overlap the image with negative margin or write text to a picture? Hello. I was wondering how I would go about doing this. I have a div, the left and right side of it is an image that I want the size to be able to be fluctuated, say, if the div goes larger than say 50 px, then it will start repeating and get larger. I have tried to start this already, but I havent had any luck. I also am not having any luck on getting the backgroun image to show. Anyone here know how I would make it to where my left or right side (border-right, border-left) will automatically resize if it is needed to go larger or get my background image to show? It's for a news conent box for my website I am coding, and I need it to go larger than just a set value. Thanks for your help. P.S. this is what I have so far Code:
<div style="width:460; height: auto; border-right: url("images/border_right.gif"); border-left: url("images/border_left.gif"); background-image: url("images/content_content.gif"); background-repeat: repeat;">
News content will go here
</div>
Resolved. Shoddy layout from a so called web developer . ========================================= Hi. Could anyone advise me on the following issue: The following URL, links to a page with an image (boat) in the second content column. The image is 200px wide and the column is 235px wide with a left and right padding of 15px. Bluestone development The column is controled by the following style: td.datacolumntwo { padding: 0px 15px 10px 15px; } The issue I have is that the image causes the column padding to kick out. I have used hspace (out of curiosity) settings to no avail. I get the padding levels back only by cutting the width of the image to nearly a quarter. Any advice would be much appreciated. Eddie Hi I have a table which i want to add 2 background images too. what i have is. one image with no-repeat at the top. Then for the rest of the table, i want to have a gradient background. Is this possible? if i want style changes for text links, but not image links, how would it work? a:hover { mystyle } img a:hover { otherstyle } a img:hover { otherstyle } ..neither of these work I am trying to get away from tables to get images in a formatted manor. I have a div with a id giving each padding and margin element (left right, top, bottom) that sets them to 0px. How can put a couple of images together (<img src="" /><img src="" />) in a div (or span) without having whitespace between them? - Thanks for the help - K Hello, as the subject states I have a question about whether IE can display a background image on a tr and a td correctly. I have a table row with a repeating background then in the first cell in that row I have another background image that goes in the top left corner with a transparent background color on the cell so that the tr background can show though. This works as it should in all browsers except IE where only the td background image appears and its transparent to the page background not the tr background. This is the css: Code: .professor_forum_row {
background: #ffffff url(../images/author_post_background.jpg) repeat top left;
}
.professor_corner_tab {
background: transparent url(../images/article_sticky_author.jpg) no-repeat top left;
}
the html is just a table with those classes assigned to the row and first td. Any ideas on why this is happening? Thanks, Ryan |
|||||||