|
HTML - Ie 7 To Firefox Positioning Problem
Comparing IE7 to Firefox... the TEXT sitting on the image looks fine in IE 7 but is slightly "bumped up" in Firefox and most other browsers. Does anyone know the explanation for this?... Thank you. Similar TutorialsThe problematic page has this url: http://geosci.uchicago.edu/~moyer/Mo...GroupPage.html It shows up in firefox the way I want it to. The pictures enlarge right on top of their thumbnail accompaniments. The enlarged images are absolutely positioned. However, in chrome, internet explorer and safari, they enlarge several hundred pixels left of where I want them to. Is there a way I can have the enlarged images positioned relative to the thumbnails? Or can I add a margin to the code that only firefox will recognize? I can send you the code if you need it to figure out the problem. It is just long and confusing, because I was modifying somebody else's code and I am a newbie. Hi all, First post here hope someone can help. I'm creating a portfolio web page for my 3D work and using this to learn a bit of web design. My current problem comes from using absolute positioning to get text to float over a background image in a precise location. I have this as I want it in Fiirefox 2.0.0.6 but the text all appears a fair bit higher in IE (I have looked using IE 6 on its own and by changing the render mode to IE in Firefox). I realise I need to do a fair bit of validation and refinement to the site but at the moment I want to get this alignment issue sorted so the site is at least visible while I work on other elements. Page url: www.iamjames.co.uk The text in question is on the used on all pages! Thanks in advance James Never mind you guys were wrong as usual. Thanks. Look at: http://test6.waltonstreetwebdesign.com/ If you look at it in firefox, it works fine. In IE 7, the positioning for div "logo" is not working properly and you can't see the logo. What is my problem? Thank you. When i tried to overlap two images, one of them at foreground(with opacity of zero value) and other one at background using absolute positioning. The image with absolute position works well with Google Chrome while when i try to open with any other browser or resoltion, the image displaces from its position i.e. it changes its required position. Code: <img src="myimage.jpg" width="150" height="113" style="opacity:0.0;filter:alpha(opacity=0);position:relative"><img src="myimg2.jpg" style="position:absolute;top:150px;left:150px" /> Please provide possible solutions... hi, i want to have a search box, and i would like it to be in the same line as my horizontal menu. how can i display a form inline with the rest of my menu? if i use div align right for my form it can be pushed right , but doesnt display properly in ie. I assume its not a right way to do it. could someone please help me out? thanks. <li><a href="" title="Miscellaneous">Misc.</a> <ul> <li><a href="">Miscellaneous</a></li> <li><a href="#">News Feed</a></li> </ul><span></span> </li> <form method="get" id="searchform" action=""> <input type="text" class="search1" style="color: #696565" value="Search " onfocus="if(this.value==this.defaultValue)this.value=''; this.style.backgroundColor='#FFCC99'" onblur="if(this.value=='')this.value=this.defaultValue; this.style.backgroundColor='#FFFFCC'"/> <button class="image" title="Submit Search">Go</button> </form> </ul> I'm trying to have 1 line of copyright at the bottom of each page on a site, but i am having to use loads of breaks to get it to the bottom each time, because when i do
Code: style="position: absolute; bottom: 5px;" in the div for it, it just goes straight to the bottom of the page before scrolling down. By that i mean when you open the page it is at the bottom, but there is more below it which you need to scroll down to, so really it is somewhere in the middle of the page. Hope i explained that well enough :-S If not here's a screenshot :-p http://i56.photobucket.com/albums/g1...wco99/cpss.png Any ideas? I have a problem... I want the text to stay where it is in the window when the browser is re-sized. Every time I resize the window, the text wraps and covers everything down the page, leaving a vertical sentence with 3 letters each line...ugh I hope you are following me. The absolute positioning works with tables and graphics, but I can't seem to get it to work with text (<p>). I have used CSS to position everything on the page, but when I resize the window, it seems the text goes along with it. Maybe my problem is using CSS for EVERYTHING. Is that ok>? it seems that I have the most luck using an external CSS document for positioning than frames, and such. Maybe if I used a table to outline the entire page? Which is better? How do I get the text to "stick" to where I put it, like the tables and such? Here is the code: <div> <p class="homehead">HEADING</p> <p class="offic"><i>Official website of</i> <b>My Company</b></p> <p class="former"><i>(Formerly My old company)</i><br><br> <hr width="250%" style="margin-left: -150px;"></p> </div> and the embedded CSS: <style> p.homehead { font-family: verdana; font-size: 19pt; font-weight: bold; position: absolute; top: 130px; left: 300px; } p.offic { font-family: verdana; font-size: 14pt; position: absolute; top: 170px; left: 285px; } p.former { font-family: verdana; font-size: 11pt; font-weight: ; position: absolute; top: 200px; left: 380px; } </style> What can I do to remedy this? Thanks matthew HTML Code: <a href="http://live.xbox.com/en-US/MyXbox/Profile?GamerTag=P2W360"> <img stely="position:absolute; TOP:30px; LEFT:30px; WIDTH:75px; HEIGHT:75px" src="http://i43.tinypic.com/35jibzd.pnge" /> </a> Why won't it position properly? Hey all. I am having some trouble positioning some images to the right of a paragraph using css. Can anyone help? HTML: Quote: <!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=utf-8" /> <link rel="stylesheet" type="text/css" href="../public_html/pages/nature.css"> <!-- TemplateBeginEditable name="doctitle" --> <title>Nature</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <script type="text/javascript" src="../public_html/pages/nature.js"></script> </head> <body onload="MM_preloadImages('../public_html/content/homerollover.jpg','../public_html/content/aboutrollover.jpg','../public_html/content/clientsrollover.jpg','../public_html/content/contactrollover.jpg')"> <div class="pagecontainer"> <div class="header"><img src="../public_html/content/header.jpg" alt="Header" /></div> <div class="menunav"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../public_html/content/homerollover.jpg',1)"><img src="../public_html/content/homebutton.jpg" alt="Home" name="Home" width="151" height="40" border="0" id="Home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','../public_html/content/aboutrollover.jpg',1)"><img src="../public_html/content/aboutbutton.jpg" alt="About" name="About" width="150" height="40" border="0" id="About"/></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Clients','','../public_html/content/clientsrollover.jpg',1)"><img src="../public_html/content/clientsbutton.jpg" alt="Clients" name="Clients" width="150" height="40" border="0" id="Clients" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../public_html/content/contactrollover.jpg',1)"><img src="../public_html/content/contactbutton.jpg" alt="Contact" name="Contact" width="149" height="40" border="0" id="Contact" /></a> </div> <div class="content"><div class="contentheader">Lorem ipsum</div><div class="contentcontainer"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lectus. Donec eget tortor id pede vehicula lacinia. Nam vitae risus non neque facilisis consectetuer. Suspendisse bibendum, sem nec rhoncus laoreet, diam tortor malesuada enim, volutpat volutpat sem nisi eget nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris scelerisque. Sed ligula. Mauris neque mi, rutrum nec, luctus a, dictum nec, libero. Duis feugiat erat eget metus. Fusce non orci. Vivamus vestibulum dapibus ipsum. Nunc dictum bibendum nunc. Nam odio augue, tincidunt eget, tristique quis, varius sit amet, justo. Suspendisse sed eros.</p></div></div> <div class="footer">Footer</div> </div> </body> </html> CSS: Quote: @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0px; } body { padding-top: 3%; padding-bottom: 3%; background-color:#bfa494; } .pagecontainer { width: 600px; margin: auto; background:#FF0000; } .menunav { background:#8c8e73; height: 40px; } .header { background:#0000FF; height: 279px; } .content { border-left:#000000 1px solid; border-right:#000000 1px solid; border-bottom:#000000 1px solid; background:#ffffff; height: 300px; z-index:1; } .contentheader { padding:20px; color:#6c482d; font-size:20px; font-weight: bold; font-family:Arial, Helvetica, sans-serif; z-index:2; } .contentcontainer { margin-left:20px; margin-right:300px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333333; text-align:justify; z-index:3; } .images { padding-bottom:200px; padding-left:400px; z-index:4;} .footer { background-color:#0066CC; height:40px; } Image: http://pseudo.samcamfilms.com/temp.JPG Any help would be appreciated. Hi guys In an effort to have a div with a semi transparent background, I have made two divs - one with the transparency, and another to place over the top for my content. I can't get my overlay div to position correctly - it seems that ie and FF start off placing the div from different positions. The page is at www.popbeatblues.com.au/rw/artist_1.php Also, making the overlay have an absolute position has chnaged the appearance of it's content divs too. Any ideas what I'm doing wrong? Cheers Shaun Hello Folks, I'm currently redesigning my site and am having a problem with the last bit! I know that CSS is the method of choice now for web design but I need to integrate my site with a commercial shopping cart called Actinic. This uses tables and is virtually impossible to rewrite using CSS. It makes for a seamless integration if I stick with tables for my part of the site, and less headaches trying to make the two sites look the same. I want to move some of the links away from the left hand column on the page and put them into a horizontal bar at the bottom. I've created a tile which repeats, but I want it separated a bit from the left hand column. Here's a url so you can see what I'm on about. http://www.magicalwonders.com/NewLook/Index.html You will see that the blue bar created by my tile is stuck to the side of the left hand column. My problem arises in trying to move this bar to the right of the left hand column, so that there is a gap between the two. I was hoping to avoid using a full size graphic as I want to keep the file size to a minimum. I've tried Cell Spacing & Padding which doesn't have any effect, so I've tried putting the background tile in between Div tags and specifying a width using the following code:- <td align="center" ><Div width=300px id="footerbackground">Some links go Here</Div></td> This hasn't worked though and the tile fills up the entire width of the cell that the Div is in. I would be grateful if anybody can offer any advice. Many thanks, Myles I'm using this template on my Tumblr blog: http://blog.tmimgcdn.com/wp-content/...ute.jpg?9d7bd4 I'm wondering how I can get those boxes to the top so that they are not centered? I've been messing about with the HTML for ages. You'll have to excuse me because I'm a noob at HTML. I appreciate any help! Thanks. Hi all, [LINK REMOVED] Just in the process of changing this website from a black layout with a background to an all white layout... I'm wishing I had started from scratch now but I stupidly tried to work with the existing site. So anyyways you can ignore the crappy looking bits because my question is just about the menu bar at the top... It's made from an inline list. Is there any way that I could spread it out across the screen, so that the menu item on the right is hard up against the right? The other thing is that the site will be in 3 or 4 languages so the menu items will have more characters in Spanish (for example). It needs to be able to adapt, or I need to implement a different solution for each language. The html looks like this: Code: <!-- main navigation --> <ul id="nav"> <li class="home"> <a href="index.htm"><span>Home</span></a> </li> <li> <div> <ul> <li><a href="message-from-director.htm">Message From Director</a></li> <li><a href="what-is-15-15.htm">What is 15/15?</a></li> <li><a href="festival-history.htm">Festival History</a></li> <li><a href="judges-special-guests.htm">Judges & Special Guests</a></li> </ul> </div><a href="#"><span>About 15/15</span></a> </li> <li> <div> <ul> <li><a href="register-now.php">Register Now</a></li> <li><a href="get-ready.htm">Get Ready</a></li> <li><a href="conditions-of-entry.htm">Conditions of Entry</a></li> <li><a href="faq.htm">FAQ</a></li> </ul> </div><a href="#"><span>How To Enter</span></a> </li> <li> <div> <ul> <li><a href="screening-information.htm">Screening Information</a></li> <li><a href="nominations.htm">2009 Nominations</a></li> </ul> </div><a href="#"><span>Programme</span></a> </li> <li> <div> <ul> <li><a href="films.htm">Films</a></li> <li><a href="festival-trailers.htm">Festival Trailers</a></li> </ul> </div><a href="#"><span>Archives</span></a> </li> <li> <div> <ul> <li><a href="festival-sponsors.htm">2009 Festival Sponsors</a></li> </ul> </div><a href="#"><span>Sponsors</span></a> </li> <li> <div> <ul> <li><a href="press-releases.htm">Press Releases</a></li> <li><a href="images.htm">Images</a></li> </ul> </div><a href="#"><span>Newsroom</span></a> </li> <li class="contact"> <div> <ul> <li><a href="contact-us.php">Contact Us</a></li> <li><a href="15-15-committee.htm">15/15 Committee</a></li> </ul> </div><a href="#"><span>Contact</span></a> </li> </ul> ...and the CSS looks like this: Code: #nav {
font-size: 15px;
line-height: 20px;
list-style: none;
padding: 0;
position: absolute;
top: 250px;
left:-5px;
width: 750px;
}
#nav li {
display: inline;
float: left;
margin: 0 0 0 0px;
position: relative;
}
#nav a {
color: #000;
float: left;
text-decoration: none;
}
#nav a span {
cursor: pointer;
float: left;
display: inline;
font-weight: bold;
line-height: 30px;
padding: 0 5px;
}
#nav li.hover a,
#nav li:hover a {
background: url(../img/active-l.gif) no-repeat 0 0;
}
#nav li.hover a span,
#nav li:hover a span {
background: url(../img/active-r.gif) no-repeat 100% 0;
}
#nav .contact div {
background: #D3D2D2 url(../img/bg-bg-t2.gif) no-repeat 0 -1px;
left: auto;
right: 0;
}
* html #nav .contact div {
right: -1px;
}
#nav div {
background: #D3D2D2 url(../img/bg-bg-t.gif) no-repeat 0 -1px;
display: none;
left: 0;
padding: 5px 0 0;
position: absolute;
top: 30px;
width: 168px;
z-index: 100;
}
#nav li.hover div,
#nav li:hover div {
display: block;
}
#nav div ul {
background: url(../img/bg-b.gif) no-repeat 0 100%;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0 0 5px;
text-transform: none;
width: 168px;
}
#nav div ul li {
margin: 0;
padding: 0;
width: 168px;
}
#nav li.hover div ul li a,
#nav li:hover div ul li a {
background: none;
color: #000;
display: block;
line-height: 30px;
padding: 0 0 0 9px;
width: 159px;
}
#nav li.hover div ul li a:hover,
#nav li:hover div ul li a:hover {
background: #D9581F;
}
Any ideas? Thanks so much in advance... Neil hi all, recently i'm making a site and i have made a link to go to you last page using java script. but when i hover over it in interneet exporer my cursor turns in to a hand but when i hover over it in firefox nothing happens. the code i use to get the hand is "style="cursor:hand" ". can someone pls help me ? ty Hi, Ive got a bit of a problem with the website im creating. This is the bit of code thats affecting the browser (I believe). <div class="header"><img src="truelogo.gif" /></div> For some reason It works perfectly in safari, but not in IE or firefox. I wont post all the source code here as there is quite alot, but the website is alesofdevon.com/betatest/mysql.php?id=1 if you need anymore info from it. Thanks Scott. Hi, <input name="Submit2" value="1" type="image" id="Submit2" src="images/Freshupdaterecordbutton.jpg" alt="Update" width="160" height="50" border="0"> The above image is a button within a form. If I click on the button, I can check the parameters passed via the form. The following tells me how long the "Submit2" parameter is using ASP strRequest = Request.Form("Submit2") strRequest = len(strRequest) response.Write(strRequest) Response.end() In Firefox 2, the length of "Submit2" is 1 In IE 7, "Submit2" is 0 I need them both to be 1. How can I do this? Is it something to do with the NAME and ID tags? The NAME and ID tags are unique on the form. Cheers, Alski How do I get the Content Management System Admin features: block to move down slightly. It looks fine in IE but firefox its not looking right http://www.upfrontdesigns.co.uk/build/services.html Hello all, I'd like to say this is my first post here on this forum and I am in need of some help... I have a website that I am re-programming / designing because when I started it I was not as good as I am now at development (I'm currently 16 years old) The problem is in HTML and I can't figure it out to save my life... I have 3 tables in HTML on my homepage, one is for whether or not the person is logged in, tells them to login to use features. Another for image links for main areas of the website Another for statistics... In firefox it does what I want: In IE, I get this interesting error... Source: Code: <table width=810 align=right cellpadding=0 cellspacing=0 border=0>
<tr>
<td>
<!-- IF NOT_LOGGED -->
<table width=810 align=right cellpadding=2 cellspacing=0 border=0 align=right>
<tr>
<td class="urgent" width=20><IMG src="{STYLE_DIR}images/icon_urgent.gif"></td>
<td class="urgent">You must be <a href="login.php">logged in</a> to use the features of this department.</td>
</tr>
</table><br>
<!-- ENDIF -->
<table width="810" height="30" border="0" cellpadding="0" cellspacing="0" align=right>
<tr>
<td width=5 class="row2"></td>
<td>
<img src="{STYLE_DIR}images/goal_sigs.jpg" width="200" onMouseOver="this.src='{STYLE_DIR}images/goal_hover.jpg'" onMouseOut="this.src='{STYLE_DIR}images/goal_sigs.jpg'" height=30></td>
<td>
<img src="{STYLE_DIR}images/stat_sigs.jpg" width="200" onMouseOver="this.src='{STYLE_DIR}images/stat_hover.jpg'" onMouseOut="this.src='{STYLE_DIR}images/stat_sigs.jpg'" height=30></td>
<td>
<img src="{STYLE_DIR}images/rank_sigs.jpg" width="200" onMouseOver="this.src='{STYLE_DIR}images/rank_hover.jpg'" onMouseOut="this.src='{STYLE_DIR}images/rank_sigs.jpg'" height=30></td>
<td>
<img src="{STYLE_DIR}images/develop_sigs.jpg" width="200" onMouseOver="this.src='{STYLE_DIR}images/develop_hover.jpg'" onMouseOut="this.src='{STYLE_DIR}images/develop_sigs.jpg'" height=30></td>
<td width=5 class="row2"></td>
</tr>
</table><br>
<table width=810 align=right cellpadding=2 cellspacing=0 border=0>
<tr>
<td class="row1" colspan=2>Signature Database</td>
</tr>
<tr>
<td class="row2">Total Signatures Created: {TOTAL_SIGS}</td>
<td class="row2">Total Members: {TOTAL_MEMBERS}</td>
</tr>
</table>
This file runs off a template class I built so that would help explain {VAR} and stuff such as that. Any help please? Why is IE being stubborn and firefox not? Hi all. I'm very new to html/css code, but have managed to create a decent looking webpage so far. Well, up until last night anyway! I added three text images to my page, and it looks good when viewing with FireFox. It use to even look ok when viewed using IE, but now my NavBar is all screwed up, and the header image will not show. Could someone please take a look at the source code, and my style sheet, and let me know what could have went wrong? Thanks! |
|||||||