HTML - Alingment Problem
On this page
http://www.mesquitechristmas.com/local/display.php?id=2 When viewing it in IE it aligns the content half way down the page. In FF it looks perfect. When I set the tables to px instead of % on the first table it works fine but I would rather have it set to 100% so everything is in line. I have been over and over this code and I do not know why it is doing this. Can anyone help me out. If you need me to I can post some code but I just figure you can view source from the link above. -Thanks Similar Tutorialshello all, Firstly happy new year to one and all. I have a problem i have only been useing html and css a month so this will prob be eaisy for you lot 2 answer but the page i am designing looks great in ff but all my images and <div>'s are out of alingment in IE. i am useing position absolute to put them were i want them e.g <div style="border-style: solid;position:absolute;top:79px;left:130px;width:711px;height:30px;font-size:40%;font-style:italic;text-align:center;background-color:#8B0000;font-size:20px;""> <a href="mmgallery.html"target="blank">GALLERY</a>/<a href="mmhygine.html"target="blank">HYGINE</a>/<a href="mmaftercare.html"target="blank">AFTERCARE</a>/<a href="mailto:ceddolls@ntlworld.com?subject=Tattoo!!">CONTACT</a> </div> can u help? I would like to have an image that takes 2 url like the following image... is it possible? if so, can someone please tell me how this could be done? Thank you very much.. NOTE: I tried doing this... <map name= 'url1' > <area shape= 'poly' coords= ' 0 , 0 , 50 , 0 , 0 , 50 ' href= 'url1.html' > </map> <a href= 'url2.html' > <img src= 'img.jpg' width= 50 height= 50 usemap= '#url1' > </a> but this only get 'url1' woring... Okay, I know that this problem is going to be really really easy, but I forgot how to do it. I use to own an older website and forgot the code. Anyways, I only know how to describe it. When I minimize the screen, it is minimizing the whole thing and collapsing it making the iframes smaller and the text fit into a smaller space. Most websites have a code (i don't know what it is) so that when someone minimizes their browser, it just makes the browser smaller and not the actual page. Here's what it looks like: http://www.freewebs.com/noeylani94/index.htm Try minimizing that and see how it looks. It collapses the whole page right? Can someone tell me the code how to fix it? Thanks =D Hello, I am new in html and I am trying to create my website. I try to do this: index.html: HTML Code: .... <body> <div id="_pi"> .... </div> </body> mycss.css: HTML Code: #_pi { margin: 0 auto; background: #f4f4f4 url(../images/bg.gif) top center repeat-y; width: 100%; height: 100%; } When I open with internet explorer my site the <div id="_pi"> is not full screen, It has an empty space like header and footer. Why, And how I can fix it? Hello, I am fairly new to web programming, and I have taken over the web administration at my work. The page I am working with is an absolute mess, but I have one bug that I just cannot figure out for the life of me. It is an overlap problem, where one of the tables overlaps the one to the right of it, even though there doesn't seem to be anything "pushing" it out further, like unwrappable text or anything like that. It only occurs in IE/Win, I have viewed in both versions 6 and 7. If anyone could give me any suggestions, I would greatly appreciate it. URL: http://www.yonasmedia.com Hi My site is http://paulinebooth.com.au/ In IE8 it does not display the body. The site displays correctly in Firefox. I have validated the code using W3C Markup Validation Service. Can anyone help? My daughter is building a website for some kind of school competition and is having a problem with how a table is displaying in IE 9. It displays properly in Chrome and FF though so I'm not sure what the problem is. Keep in mind, she's just a junior in HS and used, by all accounts, some antiquated methods in constructing the page. That said, I'm hoping someone could offer some insight into the issue. The table should be centered and the same the width of the banner and menu. For Chrome and FF, the table is centered on the page when the viewing resolution allows all the content to fit without the need for a scroll bar. On the pages where a scroll bar is needed, the table is shifted to the left to accommodate the scroll bar and thus becomes off-centered. I was thinking that an i-frame could take care of this since the scroll bar would then be located on the inside of the i-frame. In Chrome and FF, maybe it would. However, in IE, the table is displaced to the left on all pages. Interestingly enough, the displacement is the same with and without a scroll bar. Sooooo, I would humbly ask those with knowledge of such things to offer advice or a solution to this problem. Much appreciation is extended in advance. Here is the link to the site: http://www.newtonyouth.zxq.net Hello Here i am asking another question :S , anyways i need some help ! so installed SMF (smiple machine forums) to my site and i want to get this slider running http://www.bluedevilcustoms.com/comm...pic,182.0.html There is a guide there but i do not understand as i am learning the basics of web designing at the moment :/ can some one tell me what exactly i have to do here or do it for me ? (Sorry im asking for too much) But i need some help fats PS-You can pm me if you wanna do it for me Thanks a lot Hashen Hello, I've got a problem and i have been searching on the web for 2 days now and can't find how to fix it. It's a .png file problem in IE7 and IE8. I have save the .png files on different ways, Photoshop CS4 > save for the web.. png 8 and png 24. sRGB - interlaced and none. But nothing has worked out so far. Also if i go to the image physically in the IE browser they show off very good. Physically i mean, domain.com/images/picture.png I think it has something to do with the hover of one image to the second image. Strange thing is that all browsers support all this except IE7 and IE8. I don't care about IE6 this will get a redirect to browser update. So can some professional look at my page and see what is going wrong here. I would really appreciate the help.. Meanwhile thanks, BJ *** Edit Deleted my url ** Im been editing some code i found (lol) Anyways whatever i do, i can't get ie8 to work on this animation orginal code: HTML Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Evil Dynamic Layout: Text animation</title> <style type="text/css"> #canvas { position: relative; margin: 0em; } div { -moz-opacity: 0; position: absolute; } /* * { border: solid 1px ***hsia; margin: 4px; padding: 4px; -moz-opacity: 0.9 ! important; } */ </style> <script type="text/javascript"> function Animator(aElement, aSteps, aDelay) { this.element = aElement; this.delay = aDelay; this.steps = aSteps; this.transitions = []; this.addTransition = function(aTransition) { this.transitions.push(aTransition); } this.animate = function() { if (this.delay > 0) { this.delay--; } else { if (this.steps) { for (var index = 0; index < this.transitions.length; index++) { this.transitions[index].animate(this.element, this.steps); } this.steps--; } } return this.steps; } this.length = function() { return this.delay + this.steps; } } function DimensionTransition(aProperty, aValue, aEnd, aSuffix) { this.property = aProperty; this.value = aValue; this.end = aEnd; this.suffix = aSuffix; this.animate = function(element, steps) { this.value += (this.end - this.value) / steps; element.style.setProperty(this.property, this.value+this.suffix, ''); } } function KeywordTransition(aProperty, aValue) { this.property = aProperty; this.value = aValue; this.animate = function(element, steps) { element.style.setProperty(this.property, this.value, ''); } } function ClipTransition(aValue, aEnd, aSuffix) { this.value = aValue; this.end = aEnd; this.suffix = aSuffix; this.animate = function(element, steps) { this.value += (this.end - this.value) / steps; // the following is incorrect XXX element.style.setProperty('clip', 'rect('+this.value+this.suffix+','+this.value+this.suffix+','+this.value+this.suffix+','+this.value+this.suffix+')', ''); } } var delay = location.search; if (delay) { delay = delay.substring(1, delay.length); } else { delay = 50; } var animations = []; function setup() { animations = []; var body = document.getElementById('canvas'); for (var index = body.childNodes.length-1; index >= 0; index--) { body.removeChild(body.childNodes[index]); } /* Animation Constants */ var steps1 = 25; var steps2 = 15; var steps3 = 15; var lineStart = 50; var fontSize = 60; /* Element: Welcome */ var Welcome = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); Welcome.appendChild(document.createTextNode('Welcome To...')); Welcome.className = 'Welcome'; Welcome.style.top = '30px'; Welcome.style.left = (-fontSize*2*10+50)+'px'; Welcome.style.width = fontSize*4*10+'px'; Welcome.style.lineHeight = fontSize*2+'px'; Welcome.style.textAlign = 'center'; body.appendChild(Welcome); /* Element: C */ var C = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); C.appendChild(document.createTextNode('C')); C.className = 'C'; C.style.width = fontSize*3+'px'; C.style.lineHeight = fontSize*3+'px'; C.style.textAlign = 'center'; body.appendChild(C); /* Element: S */ var S1 = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); S1.appendChild(document.createTextNode('S')); S1.className = 'S'; S1.style.width = fontSize*3+'px'; S1.style.lineHeight = fontSize*3+'px'; S1.style.textAlign = 'center'; body.appendChild(S1); /* Element: S */ var S2 = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); S2.appendChild(document.createTextNode('S')); S2.className = 'S'; S2.style.width = fontSize*3+'px'; S2.style.lineHeight = fontSize*3+'px'; S2.style.textAlign = 'center'; body.appendChild(S2); /* Element: footer */ var Footer = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); Footer.appendChild(document.createTextNode('\u00A9 2001-2003 Ian Hickson. Distributed under the terms of the GPL.')); Footer.className = 'Footer'; Footer.style.top = 50+fontSize*3+'px'; Footer.style.left = lineStart/2+'px'; Footer.style.fontSize = fontSize/5+'px'; body.appendChild(Footer); /* Animation */ var WelcomeAnimation1 = new Animator(Welcome, steps1*6/5, 0); WelcomeAnimation1.addTransition(new DimensionTransition('font-size', fontSize/4, fontSize/3, 'px')); WelcomeAnimation1.addTransition(new DimensionTransition('-moz-opacity', 0.0, 1.0, '')); WelcomeAnimation1.addTransition(new DimensionTransition('margin-left', 0, lineStart+fontSize, 'px')); animations.push(WelcomeAnimation1); var CAnimation1 = new Animator(C, steps1, 0); CAnimation1.addTransition(new DimensionTransition('font-size', fontSize*5, fontSize, 'px')); CAnimation1.addTransition(new DimensionTransition('-moz-opacity', 0.0, 1.0, '')); CAnimation1.addTransition(new DimensionTransition('left', -150, lineStart+fontSize*0.1, 'px')); CAnimation1.addTransition(new DimensionTransition('top', -150, 50, 'px')); animations.push(CAnimation1); var S1Animation1 = new Animator(S1, steps1, steps1/5); S1Animation1.addTransition(new DimensionTransition('font-size', fontSize*3, fontSize, 'px')); S1Animation1.addTransition(new DimensionTransition('-moz-opacity', 0.0, 1.0, '')); S1Animation1.addTransition(new DimensionTransition('left', -50, lineStart+fontSize*0.8, 'px')); S1Animation1.addTransition(new DimensionTransition('top', 200, 50, 'px')); animations.push(S1Animation1); var S2Animation1 = new Animator(S2, steps1, steps1/4); S2Animation1.addTransition(new DimensionTransition('font-size', fontSize*4, fontSize, 'px')); S2Animation1.addTransition(new DimensionTransition('-moz-opacity', 0.0, 1.0, '')); S2Animation1.addTransition(new DimensionTransition('left', 250, lineStart+fontSize*1.4, 'px')); S2Animation1.addTransition(new DimensionTransition('top', 300, 50, 'px')); animations.push(S2Animation1); var DAnimation1 = new Animator(D, steps2, steps1*2/3); var WelcomeAnimation2 = new Animator(Welcome, steps2*2, MAnimation1.length()); WelcomeAnimation2.addTransition(new DimensionTransition('font-size', fontSize/3, fontSize*3, 'px')); WelcomeAnimation2.addTransition(new DimensionTransition('-moz-opacity', 1.0, 0.0, '')); animations.push(WelcomeAnimation2); var CAnimation2 = new Animator(C, steps2*2, MAnimation1.length()); CAnimation2.addTransition(new DimensionTransition('font-size', fontSize, fontSize*3, 'px')); CAnimation2.addTransition(new DimensionTransition('-moz-opacity', 1.0, 0.0, '')); animations.push(CAnimation2); var S1Animation2 = new Animator(S1, steps2*2, MAnimation1.length()); S1Animation2.addTransition(new DimensionTransition('font-size', fontSize, fontSize*3, 'px')); S1Animation2.addTransition(new DimensionTransition('-moz-opacity', 1.0, 0.0, '')); animations.push(S1Animation2); var S2Animation2 = new Animator(S2, steps2*2, MAnimation1.length()); S2Animation2.addTransition(new DimensionTransition('font-size', fontSize, fontSize*3, 'px')); S2Animation2.addTransition(new DimensionTransition('-moz-opacity', 1.0, 0.0, '')); animations.push(S2Animation2); var FooterAnimation1 = new Animator(Footer, steps3, MAnimation2.length()-steps2*0.5); FooterAnimation1.addTransition(new DimensionTransition('-moz-opacity', 0.0, 1.0, '')); animations.push(FooterAnimation1); var FooterAnimation2 = new Animator(Footer, steps3, FooterAnimation1.length()); FooterAnimation2.addTransition(new DimensionTransition('-moz-opacity', 1.0, 0.5, '')); animations.push(FooterAnimation2); } function idle() { var more = 0; for (var index = 0; index < animations.length; index++) { more |= animations[index].animate(); } if (more) { window.setTimeout(idle, delay); } } </script> </head> <body onload="setup(); idle()"> <div id="canvas"/> </body> </html> I we see its result we get so much top and bottom space just this code: code: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#00FFFF"><h1>Hello</h1></td> </tr> </table> I want to remove top and bottom space. any help Ok, I'm at wits end here. I have a page that is using two <ul> elements, with a few <li> elements in each. The layout works great in IE6, FireFox, and Safari. IE7 on the other hand is NOT cooperating. The problem is that IE7 seems to be "clipping off" the bottom of the <li> elements. It's hard to explain so here is a link: http://www.stovenet.com/index.php Look at the part of the page that is in the top-right corner. You will see the following: "Login Register Search Help" "Login" and "Register" each have an image to the left of them, which is placed there using css. The images will have he bottoms cut off. Also, there is css code that creates an orange bottom border when you hover over each of these elements, it does not show in IE7. Look at the same page in FF or Safari and it is perfect. IE6 looks ok but the images "bounce" when hovered over. If anybody can lend a hand I'd really appreciate it. I tried for hours to fix this and I am just coming up short. im completely new to this so forgive me.. this is my test code.. how do i get one div next to another? i want my icons, media, fashion etc.. .JPG on top of each other next to my welcome note.. this is my code 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=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <div align="center" id="navigation"><img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/news.jpg" width="86" height="15" /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/anastacia.jpg" width="86" height="15" /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/fanzone.jpg" width="86" height="15" /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/graphics.jpg" width="86" height="15" /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/site.jpg" width="86" height="15" /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/internet.jpg" width="86" height="15" /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/refresh.jpg" width="86" height="15" /></div> <div align="center"><br /> </div> <div align="center" id="banner"><img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/bannerp1.jpg" width="720" height="133" /> <br /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/bannerp2.jpg" width="720" height="63" /><br /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/bannerp3.jpg" width="720" height="146" /></div><div align="center" id="welcome"> <div align="center"><img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/welcome.jpg" width="213" height="143"/> </div> <div align="center" id="welcome"><img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/elite.jpg" width="213" height="145"/></div> <div align="center" id="welcome"><img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/topaffs.jpg" width="213" height="309"/></div> <div align="center" id="welcome"> <div align="center"><img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/disclaimer.jpg" width="213" height="229"/><br /> </div> <div align="center"><img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/icons.jpg" width="215" height="18" /><br /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/photos.jpg" width="215" height="17" /><br /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/media.jpg" width="215" height="17" /><br /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/lyrics.jpg" width="215" height="17" /><br /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/fashion.jpg" width="215" height="17" /><br /> <img src="file:///C|/Documents and Settings/Callum/My Documents/verenalay/forum.jpg" width="215" height="17" /></div> </body> </html> Im trying to get an image above my buttons but its not working .. It works when i do Code: <center> <img src="http://i226.photobucket.com/albums/dd131/kutakun/profile-1.png" width=600 height=100 border=0 alt="" title=""> </center> But shouldn't the css i made do it for me? HTML CODE ( Profile.html) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>Profile</title></head> <head> <link href="myStyle.css" rel="stylesheet" type="text/css" media="screen" /> </head> <style type="text/css"> <!-- body { background-color: #669999; background-image: url('http://i226.photobucket.com/albums/dd131/kutakun/backgound2.png'); background-repeat: no-repeat; background-position: center; background-position: top; #nav td {vertical-align: top; width: 94px; height: 42px; padding: 0px; margin-top: 150px;} #nav {padding: 0px; margin: 0px auto; border: none; text-align: center;} } --> </style> </head> <!-- MENU BAR --> <table id="nav"> <tr> <td> <div style="margin-left: 285px; margin-top:150px; padding: 0px;"><img src="images/home.png" alt="" border="0"></div> <td> <div style="margin-left: 20px; margin-top: 150px; padding: 0px;"><img src="images/gallery.png" alt="" border="0"></div> <td> <div style="margin-left: 20px; margin-top: 150px; padding: 0px;"><img src="images/support.png" alt="" border="0"></div> <td> <div style="margin-left: 20px; margin-top: 150px; padding: 0px;"><img src="images/contact.png" alt="" border="0"></div> <td> <div style="margin-left: 20px; margin-top: 150px; padding: 0px;"><img src="images/forum.png" alt="" border="0"></div> </td> </tr> </table> </body> </html> CSS CODE ( myStyle.css ) Code: #logo { width: 600; height: 100; background: url(http://i226.photobucket.com/albums/dd131/kutakun/profile-1.png) no-repeat; } Fixed it =] So I have this code: Code: <link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/24741033/css3menu1.css" /> <DIV align="center"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav $("ul.topnav li span").click(function() { //When trigger is clicked... //Following events are applied to the subnav itself (moving subnav up and down) $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click $(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up }); //Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("subhover"); //On hover over, add class "subhover" }, function(){ //On Hover Out $(this).removeClass("subhover"); //On hover out, remove class "subhover" }); }); </script> <div align="center"> <div class="container"> <div id="header"> <ul class="topnav"> <li><a href="http://www.desporto-em-directo.forumeiros.net">Homepage</a></li> <li> <a href="#">Live</a> <ul class="subnav"> <li><a href="/h50-live-1" target=player>Live 1</a></li> <li><a href="/h51-live-2" target=player>Live 2</a></li> <li><a href="/h52-live-3" target=player>Live 3</a></li> <li><a href="/h53-live-4" target=player>Live 4</a></li> <li><a href="/h54-live-5" target=player>Live 5</a></li> </ul> </li> <li> <a href="#">Notícias</a> <ul class="subnav"> <li><a href="/h34-sic-noticias" target=player>Sic Notícias</a></li> <li><a href="/h31-rtpn" target=player>Rtp N</a></li> </ul> </li> <li> <a href="#">Musica</a> <ul class="subnav"> <li><a href="/h44-nrj-pop" target=player>NRJ Pop</a></li> <li><a href="/h42-nrj-dance" target=player>NRJ Dance</a></li> <li><a href="/h43-nrj-pure" target=player>NRJ Pure</a></li> <li><a href="/h45-nrj-urban" target=player>NRJ Urban</a></li> </ul> </li> </li> <li> <a href="#">Desporto</a> <ul class="subnav"> <li><a href="/h39-sportv-brasil" target=player>Sportv1 BR</a></li> <li><a href="/h46-sportv2-brasil" target=player>Sportv2 BR</a></li> <li><a href="/h48-nba-tv" target=player>NBA TV</a></li> <li><a href="/h47-super-tennis" target=player>Super Tennis</a></li> </ul> </li> </li> <li><a href="/h1-guia-tv" target=blank>Programação</a></li> <li><a href="/h49-radios" target=player>Rádios</a></li> <li><a href="http://www.google.com/chrome" target=blank>Browser Recomendado</a></li> <li><a href="http://www.games-and-stuffs.blogspot.com" target=blank>Download de Jogos</a></li> </ul> </div> </div> </div> but if I put on my webhoster (which is free) it doesn't support css or jquery in html code, so whats the html to host the css part in dropbox and instead of css code it understands the code wrote in css file on dropbox... Same thing to jquery EDIT: I worked out the css, but still need with the jquery Dear members, I am not very good in HTML programming so please accept my apologizes if my question is very simple. I have a website called loonu.com. In IE7,IE8,Chrome,Firefox,Safari etc.. its mainpage (www.loonu.com) is shown exactly how i want to, whereas in IE6 it looks terrible. My question is, according to your experience is my mistake so obvious because i can not see it. Thanks for your help. HTML Code: <body> <div align="center"> <div id="logo" style="width: 852px; text-align:left;margin-top: 10px; margin-bottom: 10px;"> <img src="logo.png"> </div> <img src="top.png"> <div id="main" style="width: 852px; background-color: white"> asfasfddasf <p> </div> <img src="bottom.png"> </body> i keep getting a open spot at the bottom or whereever i put the <p> tag. any idea? I am working on a website for work and thought it was all kosher and ready to go. I sent it to our VP and he came back and said that things looked a little wonky. Having tested it in both IE and FF, I was shocked. However, he has IE 7.0 and for some reason it's all over the place when using that version. Here is the website: http://www.mtesc.org Any help would be greatly appreciated as the problem needs to be fixed and I cannot figure out what to do to fix it! I just started learning Dreamweaver, (which is what I used to create this site) and I am familiar with some html/css but not enough at this point to fix this problem. Thanks in advance for any help!!!! My website is urlremoved.com and i am having a problem from keeping the ads on the right hand side from changing whenever the window size gets smaller. Here is a link to my CSS for the website http://www.uploading.com/files/WSAC1...hteet.css.html But any help would be great. Thanks a bunch -thomas |