|
HTML - Issue With Placing Div Over Image In Ie9
Hi,
I have to draw divs over an image. When the mouse is over a div, the bgcolor of the div is changed to show it highlighted with some opacity. Am using following code for it Code: <!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<style type="text/css">
.mouseOutClass {
border: 1px dotted #74CFFA;
}
.mouseOverClass {
cursor: pointer;
border: 1px solid #74CFFA;
background-color: #ffeaab;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
}
</style>
<script type="text/javascript">
function highlightBox(obj, show) {
var attr = obj.getAttribute("boxList");
if (show) {
obj.className = "mouseOverClass";
} else {
obj.className = "mouseOutClass";
}
}
</script>
</head>
<body>
<div style="height: 100%;width: 100%;">
<div >
<div style="position:absolute; left:0px; top:0px; height:150px; width:150px;" class="mouseOutClass" onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);" >
<table width="100%" height="100%">
<tr>
<td> </td>
</tr>
</table>
</div>
<div style="position:absolute; left:200px; top:100px; height:200px; width:200px;" class="mouseOutClass" onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);" >
<table width="100%" height="100%">
<tr>
<td> </td>
</tr>
</table>
</div>
<img src="someImage.jpg" />
</div>
</div>
</body>
</html>
This is working fine in all browsers except IE 9. It works in IE 9 too if I use the HTML 4 doctype instead of HTML5. Am I missing something here or is it a bug with IE9? Thanks Kapil Similar TutorialsHow can i place an image so it is at the exact x and y that i want it? Becuase if i put my image right after the body tag, it is hanging off the left a little bit. I need it right at 0,0. Please help me?! I'm a total noobie, so don't shoot me if this has been answered before. What is the best way to place text and a link image on top of another image in Kompozer (version 0.8b3 for Mac OSX)? I want the page to be centered in the browser. Or a simple html markup to help me understand would be good too. Seems simple enough, but I cannot figure it out. Was wondering how I'd place an image at the very top of the page so there's no white space (this site has it's logo pretty high up there). At the moment i get about .5cm white using just a standard <img> tag. Anyway, I'd appreciate some help. Thanks, Cam http://ps2cho.net/ At the top where it has ps2cho.net I would love to have an image span across. I don't know much about html...where would I start with this? Is it possible with the wordpress theme? What is the html code when placing multiple links on a single image? For example... the image is a tree with three leaves. Rather than having the entire image being a link, how would I set up an html code that makes each individual leave a link? What is the html code when placing multiple links on a single image? For example... the image is a tree with three leaves. Rather than having the entire image being a link, how would I set up an html code that makes each individual leave a link? ________________________________________________________________ Buying diamonds online - James allen review - Bluenile.com review - Mondera Diamonds Review - Online diamond store reviews - Engagement ring guide - Engagement ring guide hello, how can i place pictures i wrote a poem left side and need place a pic right side of the poem but it goes right side of where the poem end any help appreciated Hi again I decided to use divs instead of tables for the html layout, now i have some issues and would like to ask you guyz around here. this is the html : PHP Code: <body> <div id="wrapper"> <div id="top"> <div id="logo"></div> </div> <div id="menlog"> <img src="logo.png" width="231" height="54" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Search: </a></li> <li><div id="searchbx"><form class="search" action=""> <input type="text" class="text-field"/> <input type="submit" class="submit" value="submit" /></form> </div></li> </ul> </div> </div> </body> and this is the css: PHP Code: #wrapper { text-align: left; margin: 0px auto; padding: 0px; width: 100%; /* border: 1px solid black; */ } #top { width: 100%; /* border: 1px solid black; */ } #logo { background: url('bg-top.png') no-repeat; padding: 0px 0px; margin: 10px 0px 0px 0px; width: 100%; height: 90px; position: relative; } #menlog { /* width was 100% */ width: 100%; font-size:15px; } and this is what i get : now my problem is that my menu wont remain in the same line as the logo and it goes to the next line under the logo which i dont want! i tried also to put this line : PHP Code: <img src="logo.png" width="231" height="54" /> inside a div which i gave "display:inline" property but that failed too ! it would be nice if someone can advice me. I want to use <a href="...">thumbnail.png</a> or something similar to place an image in a layer on a different part of the same page. Can this be done in HTML or do I need to write something else? Or am I asking the impossible?? I'd like to avoid calling another page as this could result in slow performance, and I'm trying to avoid using frames. The various layers on the page are defined in CSS. I've managed to do this much of a page myself, putting the first image in the upper left corner using <table>, but all of my attempts to place another image in the upper right corner have failed. I'm trying to do it in separate tables: Code: <img>
<left></left>
<table style="text-align: left; width: 25%;">
<tbody>
<tr>
<td align="left" width="100%"><img
src="http://www.mediafire.com/imgbnc.php/8c949126f0375905b2efe0813fda35e44g.jpg"
alt="A Barbarian Dwarf" mouseover="A Barbarian Dwarf"
align="left" border="0" height="385" width="260"></td>
</tr>
</tbody>
</table>
I've tried doing it this way: Code: <img><right></right><table style="text-align: right; width: 25%;"> <tbody><tr><td align="right" width="100%"><img src="" alt="" mouseover="" align="right" border="0" height="385" width="260"></td></tr></tbody></table> But it keeps placing the 2nd image under the 1st one....huh Perhaps this really belongs in the CSS section, but it seems more of a HTML issue to me, so I'm sticking it here. :p Here's my question! I've got a set of links, and I used an external CSS sheet to make it so that when the links are hovered over, the image changes. That all works fine and dandy, but now the links are lined up one on top of another. I'd like to make them sit next to one another, like so: http://img411.imageshack.us/my.php?i...lllinksgy4.jpg How can I do this? I've tried adjusting the table tr height and I tried to put the links in a div layer, but the divs of the CSS code seem to be overiding everything else. I'm really not sure what else to try, and any help would be entirely welcome. This is the page I'm working on: http://www.freewebs.com/ramsus-kun/S...ssingabout.htm and these are the particular links in question: <div class="nav"> <a href="http://www.freewebs.com/ramsus-kun/Suikogaiden/Home.htm"> <img src="http://img356.imageshack.us/img356/4239/link01home01rl1.png" width="81" height="37" alt="Home" /> </a> </div> <div class="nav2"> <a href="http://www.freewebs.com/ramsus-kun/Suikogaiden/Translation.htm"> <img src="http://img514.imageshack.us/img514/2622/link02translations01za4.png" width="138" height="37" alt="Translation" /> </a> </div> <div class="ForumCSS"> <a href="http://suikogaidentranslation.freeforums.org/index.php?sid=9c56e6b8ae5bbb47f0fd206ccc660b89" target="_blank"> <img src="http://img262.imageshack.us/img262/7061/link03forum01yb3.png" width="82" height="37" alt="Forum" /> </a> </div> <div class="MemCSS"> <a href="http://www.freewebs.com/ramsus-kun/Suikogaiden/Members.htm"> <img src="http://img356.imageshack.us/img356/664/link04members01vk8.png" width="112" height="37" alt="Members" /> </a> </div> <div class="LinkCSS"> <a href="http://www.freewebs.com/ramsus-kun/Suikogaiden/Links.htm"> <img src="http://img262.imageshack.us/img262/3954/link05links01mu9.png" width="76" height="37" alt="Members" /> </a> </div> Thanks! --rin_uzuki I am new to HTML and all and was wondering how you place text next to an image? Here is an illustration of what I am trying to accomplish... PICTURE PICTURE PICTURE text text text text text PICTURE PICTURE Pretend that the words PICTURE illustrate one picture. I want the text to be centered on the right of the picture. How do I do this? Thanks!! how can i place text and pictures where i want i would be nice by using cordinates but i don't know how... Ok, I'm fairly new to html, so I photoshopped me a simple layout which I hope to use to help teach myself HTML. I have got some of it done ok, but I'm having a little problem with the text, as you can see if you look at the page. http://aa-anonymous.co.nr The text is just in the center of the content area. How can I make it go to the top. And if I have to use CSS, I will do, but I dont particularly want to jump into that until I know and understand HTML a little more. Thanks to anyone that can and does help. Resolved.* I'm doing some very basic coding and I'm not sure why but one of my images will not show up - I cannot seem to locate the problem. Code: <html>
<head>
<title</title>
<style>
img {
padding: 0px;
margin: 0px;
display:block;
}
#container-object {
background-image: url('http://i.imgur.com/gHgb5.jpg');
height: 250px;
width: 520px;
margin: 0;
padding: 15px 0px 15px;
}
</style>
</head>
<body>
<img src="http://i.imgur.com/fVgTl.jpg" alt="top" />
<div id="container-object" style="text-align:center">
<object>
<param name="movie" value="http://www.youtube.com/v/SmWWd_QDc6w?version=3&feature=player_detailpage">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/SmWWd_QDc6w?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="250"></object>
</div>
<img src="http://i.imgur.com/wMrMI.jpg" alt="bottom />
<img src="http://imageshack.us/photo/my-images/825/ojygw.jpg/" alt="twitter" />
</body>
</html>
The image in BOLD is the problem image. Hi all, I'm currently working on a website for our office, but absolutely not an expert. Usually, I can find plenty information on the internet to fix more or less what I like to make. This time, however, I'm clueless... The bottom 1/4 of the screen will be a menu bar with images. (small, approx 120x63px). I want these images scattered across the bar. They will be image links to our current projects. By varying in size and place (chronologically from left to right), the importance will be visualized. Thus, the images won't be placed in a grid. I hope I made myself clear and you guys understand what I'm looking for. I've tried working with the AP-elements in Dreamweaver, thus far, unsuccessful. (I'm not even sure if this should be here or in the CCS forum...my apologies) Your advise would be appreciated! Hello all! In my job, I talk to a customer or another rep, solve their problem, and note their accounts respectively. To avoid unnecessary repetition and typing the same thing over and over, I had knocked up a little html page (stored on my hd) with a javacode that had my most frequently used notes, such that I could click a form button, and the note was copied to the clipboard. Then I could just tab back to my working software and paste the note into the account. This worked beautifully until the company updated the security in our system, and now no page may use java. With my little html app, I just had a page full of pressable buttons that had one or two keywords on them, so that I knew which note I was picking. Having all of the notes listed longhand and having to select them by hand just takes so long, when I had such an elegant solution before. Does anyone know a method of accomplishing this task without using Java? Okay well I have a bit of a problem... it's not major but it's enough to annoy a perfectionist. On my website I have set up a table (100% wide) with three columns in, the middle column is 700px wide. (I presumed this would balance out the two side columns placing the middle column in dead center. It does(ish). I am guessing this might be a way that is frowned upon but, I am thinking of adding extra little bits of info in them outside columns later on... In safari (my main browser) it works fine and places it exactly however, in firefox (on mac) there is a slight one pixel nudge to the right which stands out significantly. (In fact, it was the first thing I noticed!) The background image is obviously the problem but this seems like the only route as I have found this error half way down the line and I do not want to go back and do a load of HTML code editing! Screenshots below: Firefox: http://img231.imageshack.us/img231/5249/picture7mfq.png Safari: http://img219.imageshack.us/img219/4269/picture6kpd.png Is there any possible fix to this solution? Only logged in users can see this page so I could store a users screen width in a $_SESSION variable using PHP and then adjust this on each page? Just an idea I thought of but I doubt... any help is highly appreciated!!!!!! P.S: I have not tested in IE yet... I will in a minute... UPDATE //////////////////////////////// I just tested it in Firefox on Windows Vista.... there was no problem. And as for Internet Explorer.. everything is fine.. |
|||||||