|
HTML - Problem With Divs Between Ie And Firefox
Hello,
In Internet Explorer, the following page shows just fine: www.myspace.com/milqud However, in Firefox, there's small gaps between the images and Flash files. I'd like to remove these gaps. How do I go about doing this? Here's the html code I'm using: HTML Code: <img src="http://www.milqud.com/myspace/topleft.jpg" width="390" height="520" border="0"> <object enableJSURL="false" enableHREF="false" saveEmbedTags="true" allowScriptAccess="never" allownetworking="internal" type="application/x-shockwave-flash" allowScriptAccess="never" allownetworking="internal" height="520" width="410" data="http://www.milqud.com/myspace/topheader.swf"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.milqud.com/myspace/topheader.swf" /> </object> <br> <img src="http://www.milqud.com/myspace/mainbg.jpg" border=0> Similar TutorialsHello, thanks for stopping by to help me out. I'm making myself a website at the moment, and I'm using divs to create the layout. I've got it looking the way I want in IE but there's a glitch with Firefox. I'm using php include to insert the header (which is a container div with two divs inside - stacked horizontally) on the top of all pages. With IE this works fine, but in Firefox the div in the main page containing all the body and text overlaps onto the header. I've taken two screenshots if you want to take a look to see what I mean: FF: http://img253.imageshack.us/img253/9...eenshotpq3.jpg IE: http://img441.imageshack.us/img441/6...eenshotgp9.jpg The page is http://www.exclusive-2-u.com/GeorgiaMarie/about.php if you want to check out the code. Thanks again! Georgia I am working on a page and everything shows up perfectly in every browser I have tried except for internet explorer, which messes everything up. Here is how the page is supposed to look: http://i140.photobucket.com/albums/r.../Picture12.png however, here is how it looks in internet explorer. it moves the entire div underneath everything else when it should be aligned next to it: http://i140.photobucket.com/albums/r.../Picture13.png and also, in internet explorer it messes up within the div itself, but only to one of my thumbnails like so: http://i140.photobucket.com/albums/r...icture14-1.png my boss and i have been fighting with this for a while now, here is the link to the page: http://www.nba.com/sixers/dance/media.html and here is my coding for the div itself, if you need to see the rest i can post it as well <div id="dancers"> <div class="dancer"> <a href="/sixers/dance/annie.html"><img src="/media/sixers/annie_thumb.jpg" /></a> <a href="/sixers/dance/annie.html">Annie</a> </div> <div class="dancer"> <a href="/sixers/dance/chenelle.html"><img src="/media/sixers/chenelle_thumb.jpg" /></a> <a href="/sixers/dance/chenelle.html">Chenelle</a> </div> <div class="dancer"> <a href="/sixers/dance/dana.html"><img src="/media/sixers/dana_thumb.jpg" /></a> <a href="/sixers/dance/dana.html">Dana</a> </div> <div class="dancer"> <a href="/sixers/dance/danielle.html"><img src="/media/sixers/danielle_thumb.jpg" /></a> <a href="/sixers/dance/danielle.html">Danielle</a> </div> <div class="dancer"> <a href="/sixers/dance/deirdre.html"><img src="/media/sixers/deirdre_thumb.jpg" /></a> <a href="/sixers/dance/deirdre.html">Deirdre</a> </div> <div class="dancer"> <a href="/sixers/dance/erica.html"><img src="/media/sixers/erica_thumb.jpg" /></a> <a href="/sixers/dance/erica.html">Erica</a> </div> <div class="dancer"> <a href="/sixers/dance/jeaneen.html"><img src="/media/sixers/janeen_thumb.jpg" /></a> <a href="/sixers/dance/jeaneen.html">Janeen</a> </div> <div class="dancer"> <a href="/sixers/dance/jenn.html"><img src="/media/sixers/jenn_thumb.jpg" /></a> <a href="/sixers/dance/jenn.html">Jenn</a> </div> <div class="dancer"> <a href="/sixers/dance/jessica.html"><img src="/media/sixers/jessica_thumb.jpg" /></a> <a href="/sixers/dance/jessica.html">Jessica</a> </div> <div class="dancer"> <a href="/sixers/dance/julie.html"><img src="/media/sixers/julie_thumb.jpg" /></a> <a href="/sixers/dance/julie.html">Julie</a> </div> <div class="dancer"> <a href="/sixers/dance/kate.html"><img src="/media/sixers/kate_thumb.jpg" /></a> <a href="/sixers/dance/kate.html">Kate</a> </div> <div class="dancer"> <a href="/sixers/dance/lauren.html"><img src="/media/sixers/lauren_thumb.jpg" /></a> <a href="/sixers/dance/lauren.html">Lauren</a> </div> <div class="dancer"> <a href="/sixers/dance/melanie.html"><img src="/media/sixers/melanie_thumb.jpg" /></a> <a href="/sixers/dance/melanie.html">Melanie</a> </div> <div class="dancer"> <a href="/sixers/dance/melinda.html"><img src="/media/sixers/melinda_thumb.jpg"></a><br><a href="/sixers/dance/melinda.html">Melinda</a> </div> <div class="dancer"> <a href="/sixers/dance/nina.html"><img src="/media/sixers/nina_thumb.jpg" /></a> <a href="/sixers/dance/nina.html">Nina</a> </div> <div class="dancer"> <a href="/sixers/dance/vi.html"><img src="/media/sixers/vi_thumb.jpg" /></a><br><a href="/sixers/dance/vi.html">Vi</a> </div> </div> Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<STYLE>
#mp { border:1px solid #999; width:300px; background-color:#222; color:#999;}
#mptabpanel { float:left; width:300px; height:400px; }
#mptabcomments { background-color:#003; z-index:4; position:relative; top:0px; left:0px; }
#mptablinks { background-color:#030; z-index:5; position:relative; top:0px; left:0px; }
#mptabplaylist { background-color:#300; z-index:6; position:relative; top:0px; left:0px; }
</STYLE>
</head>
<body>
<!-- open mediaplayer --><DIV id="mp">
<DIV id="mptabpanel">
<DIV id='mptabcomments'>COMMENTS TAB</DIV>
<DIV id='mptablinks'>LINKS TAB</DIV>
<DIV id='mptabplaylist'>PLAYLIST TAB</DIV>
</DIV>
</DIV><!-- close mediaplayer -->
</body>
</html>
The three divs, "mptabcomments/links/playlist" are supposed to occupy the exact same position. (Only one of them will be visible at any time.) I've tried relative positioning and altering each div's z-index but my brain seems to have switched off here! I can't use absolute positioning because this layout is part of a bigger layout which itself is going to be absolutely positioned around the screen and I don't want to have to manually update each contained div's position every time the parent div is moved. Hey guys my site http://www.atlanta-web.com I have 3 <div>s which i centered using the css technique Code: margin: 0 auto; They work perfect in IE 7, FF2, FF3 but fail in IE6 any idea what i could do to make this correct? Thanks, Eric i've trouble getting my header not to interfer with my menu. I think its got something to do with my margins, but i cant figure it out. Thx for helping out a total beginner! http://wemadethis.net/blog.html I want to make an HTML "bar graph". This would be very simple except that I want the name of each bar to be overlaid. Again, simple, but what if the bar name is longer than the bar? Then it can't be text inside a coloured DIV, can it? Or can it? An important thing is that the graph's width will not be fixed. It'll probably take up about 40% of the page. So if the available page width is altered, the graph and it's bars will have to be re-stretched. Could somebody show me a simple example of how to "overlay" text over a DIV that not wide enough to contain it? Here's what I want: Thanks in advance for any help, Seymour. http://ebay.110mb.com/test/ I made some changes to the design and ended up mashing it! I just can't see where I have gone wrong .... anyone any ideas? Hi, I was trying to develop a page in HTML/CSS but having some difficulties. I have created many pages before but this one is giving me a hard time. What I have done differently this time it, i have used Positioning tags. The problem i am having is I can not set any two divs or images side by side. If i set 1 image and 1 div side by side they are being placed on top of each other. But, i may be going crazy here, i was able to place the top two divs side by side (logo and privacy_protected). Can any one please tell me what i am doing wrong or what i should do? Here is the code that i am using: Code: <body>
<div id="wrapper">
<div id="bodypic">
<div id="logo"><a href="index.html"><img src="images/transparent.png" width="319" height="100" border="0" /></a></div><!--logo -->
<div id="privacy_protected"></div><!--privacy_protected -->
<img src="images/transparent.png" height="29" width="1020"/>
<div id="728block">
<img src="images/transparent.png" height="89" width="18" style="float:left"/>
<div id="728adunit"><img src="images/728x90.jpg" width="728" height="90" /></div><!--728adunit -->
<a href="#"><img src="images/transparent.png" height="89" width="23" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="45" width="219" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="43" width="202" style="float:left"/></a></div><!--728adblock -->
</div><!--bodypic -->
</div><!--wrapper -->
</body>
And the CSS Code: #wrapper {
height: 1174px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#bodypic {
background-image: url(images/wrapper.jpg);
float: left;
height: 1174px;
width: 1024px;
}
body {
background:#FFF;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
font-size:14px;
}
a:link {
color: #06F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #06F;
}
#logo {
background-image: url(images/Editorial_v3-1_01.gif);
float: left;
height: 103px;
width: 498px;
}
#privacy_protected {
background-image: url(images/Editorial_v3-1_02.jpg);
float: left;
height: 103px;
width: 526px;
}
#728block {
float: left;
height: 91px;
width: 1024px;
}
#728adunit {
float: left;
height: 90px;
width: 728px;
}
a:hover {
text-decoration: underline;
color: #06F;
}
a:active {
text-decoration: none;
}
Please help! i'm trying to wrap my head around floats, and implement them into a new design i'm doing. basically it's a 4 column directory listing. it looks fine when the browser is >960px, but once you resize your browser so only two columns fit horizontally, the 3rd column appears below as desired BUT it is off to the right, and the 4th column is below on the left. once you resize your browser so only one column fits horizontally, it appears correct again. any tips to fix the layout when only two columns can fit horizontally? the site is here (css is in the header for now): http://cortlandareatribune.com/test/directory.html 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 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! 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? I'm new to web design so I hope this makes sense to someone. I am trying to make a website for a new buisness, I'm using text wrangler on a mac to write the code and have been checking my progress in Safari. I have just checked the site on firefox and the banner at the top isn't showing up? This is the html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Peris & Corr</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="container"> <div class ="img"><img src= "logowebsite.jpg"</div> <div id="wrapper"> <div id="content"> <p><strong>What we do:</strong></p> <p>- create a range of hand made textile products and greeting cards <p>- offer an eco frienly screen printing service, printing only with water based inks on to ethically sourced garments</p> <p>Montegeraliquam sed pede in cursus praesenec vestas rhoncus wisi at wisi. Condisseloborttis enim et ipsum mauristie id felit adipiscipit ac auctortorttitor sempor. Vitantesqueat sempus non sed et mus sit vivamus purus netus hendiment. Pretiuma diam et id tempus dolor por wisi sed volutpat facilisi.</p> <p>Wisiet sus adipit phasellentum elit condissim consecteturpiscing sapien vivamus et congue. Utvel tris quismod cursus liberos elit nisse curabitur tur parturpis tellenterdum. Semperligula curabitae tellentesque nulla trices vestas ristibulum id justo auctor facinia. Natisdonec consequat nibh pellus.</p> <p>Vestibusodio euisque id elerisus lacus tincidunt sit malesuada lacus pellus parturpiscing. Pellenterdumat maecenatoque cras a magna nibh et quis diam ames et. Laoremvolutpat ac dolor eget eget temper lacus vestibus velit lacus venean. Magnaipsum tellus morbi leo aliquat nulla convallis pellentesque.</p> </div> </div> <div id="navigation"> <ul> <li><a href="home page.html"><strong>home page</strong></a></li> <li><a href="products.html"><strong>products</strong></a></li> <li><a href="screen printing.html"><strong>screen printing</strong></a></li> <li><a href="about us.html"><strong>about us</strong></a></li> <li><a href="stockists.html"><strong>stockists</strong></a></li> <li><a href=http://perisandcorr.blogspot.com/><strong>blog</strong></a></li> <li><a href="contact us.html"><strong>contact us</strong></a><li/> </ul> </div> <div id="extra"> <img src= "bags.jpg"> <img src= "ink.jpg"> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html> I hope someone can help, and that there is a simple solution. Thanks 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. 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 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 Can someone please help me and shed light on this? TIA!! I'm building an ecommerce site and there are 4 thumbnails that you can click on, then the main image swaps to the thumbnail you just clicked on (like how most ecommerce sites work). But I won't have 4 thumbnails all the time, maybe 2 or 3 but maximum of 4. When I test the page with 4 thumbnails, it works fine. But if I have only 2 or 3 thumbnails, the spacing looks odd on Firefox. (Looks perfect on Safari) I want them to be always left justified but they look like they are forced to be centered in the space given. What am I doing wrong? I appreciate any help! The following code is for the thumbnail: Code: <tr> <td width="60" align="left"><a href="#" onClick="javascript:image_click(1);return false;"><img border="0" src="thumbnail.asp?file=[image1]&maxx=60&maxy=0" name="pimage1"></a> </td>
<td width="5" align="center"></td>
<td width="60" align="left"><a href="#" onClick="javascript:image_click(2);return false;"><img border="0" src="thumbnail.asp?file=[image2]&maxx=60&maxy=0" name="pimage2"></a> </td>
<td width="5" align="center"></td>
<!--END: image2-->
<!--START: image3-->
<td width="60" align="left"><a href="#" onClick="javascript:image_click(3);return false;"><img border="0" src="thumbnail.asp?file=[image3]&maxx=60&maxy=0" name="pimage3"></a> </td>
<td width="5" align="center"></td>
<!--END: image3-->
<!--START: image4-->
<td width="60" align="left"><a href="#" onClick="javascript:image_click(4);return false;"><img border="0" src="thumbnail.asp?file=[image4]&maxx=60&maxy=0" name="pimage4"></a> </td>
<td width="5" align="center"></td>
<td width="60" align="left"></td></tr>
<!--END: image4-->
Hello, I've got a weird problem that I've never come across before... I've created a page with a hidden div on it that is displayed at certain times (after a button is clicked). The div is displayed on top of a semi opaque div that covers the whole of the page (this is created and added to the page when the hidden div is shown). The effect is very similar to the lightbox technique. To prevent select boxes showing through the opaque overlay in IE6 I'm also using an iframe shim. The only problem I have is that in FireFox, the text input fields on my lightbox div do not have the flashing carat in them. You can select the inputs and enter text into them, it just looks a little odd not having a carat in them when they are selected. Anyone else come accross this? Similar problem to fender967, my website: http://www.freewebs.com/microbitztest/ looks fine in IE but not in firefox??? Whats that all about? |
|||||||