|
HTML - Tables Acting Differently In Ie?
I just notices something strange about my site: I typically use firefox, so I never noticed it before.
http://arcadefreedom.com in firefox, everything displays fine, but in ie... look at the stats boxes on the right (purple), there is a space between the title and the body of each stats box that doesnt appear in firefox. I've tried everything I can think of (and I'll be the first to admit i'm not all that great in html) to get rid of that space in IE... valign, cellspacing, cellpadding... Any ideas? Thanks! Similar TutorialsHello, I use Dreamweaver to build my sites but I am not getting anywhere with this problem. I have tried everything I can think of. It might be right under my nose and I'm not seeing it. This is a rough draft so it's not going to look that great. This is how I want it to look: http://www.rimesweekly.com/roughdraft2.html When I add more stuff on the left and right side of the table it does this: http://www.rimesweekly.com/roughdraft3.html The tables in the middle get longer and I cannot figure out what to do. I have added extra cells, taken away the table border, added the table border, made sure the tr is aligned at the top, deleted the width and height of the tr and td, etc. I'm just so confused! When I am viewing my page in Dreamweaver it looks like the way I want it. Hope ya'll can help! Hi. I just had my dad download the Opera web browser and I was checking on a website I did with all black tables... the tables are unseen when viewed on Mozilla or IE but when I look at the page on Opera the tables show up and are grey bordered. Is this just an error with Opera's code reading or is there something I can be doing to prevent it? the site is www.spmstudio.com Thanks! Hey I have been using some AJAX code and my <p></p> is acting like <br /> see http://www.walterdecantelupe.co.uk/new/index2.html I can't see why. please help! The html is HTML 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=utf-8" /> <title>Walter de Cantelupe Inn, Kempsey ~ Worcestershire</title> </head> <body> <p><strong>The Walter de Cantelupe</strong> is situated in the village of Kempsey, just 4 miles from <a href="http://www.visitworcester.com/" title="Visit Worcester">Worcester</a> City centre on the A38, The Walter de Cantelupe is the perfect place for lunches, evening meals or a room for the night. Large open log fire, plush comfy furnishings, paved walled Garden - an Inn for all seasons.<br /> This privately owned & run free house is understated in appearance yet embraces a soul brought to life by the Landlord & the staff. The house, partly dating back to the 17th Century, retains original features such as exposed beams & roaring log fire in the winter months. One of the guest bedrooms is in the oldest part of the Inn and is said to be haunted.</p> <p>The food on offer combines both traditioanl pub dining as well as imaginative and exciting comtemporary creations all prepared in the pub's own kitchen, using as much regional, seasonal and traditional produce as possible.</p> <p>Great emphasis is also placed on top-rated British cask conditioned ales. There are normally four hand-pulled beers available featuring at least one guest ale. The wine list is small but carefully chosen reflecting the knowledge and interest of the landlord. There is even wine from the local award winning vinyards.</p> <p>"The Landlord Martin is the finest of hosts, whose attention to beer keeping, providing superb food and ensuring a great atmosphere are second to none. All this and great value, what more can you ask for in a wonderful period, intimate pub." </p> <h3>A small, old village inn keeping the genuine character of an English Public House - good food & a friendly welcome...</h3> <p><a href="http://walterdecantelupe.co.uk/Joomla_Folder/component/option,com_forme/Itemid,35/">Book a Table</a> ~ <a href="http://walterdecantelupe.co.uk/Joomla_Folder/component/option,com_forme/fid,4/Itemid,56/">Room Booking</a> </p> <h3 style="word-spacing: 5px">Paella Party</h3> <p>The assembled crowd could be forgiven for thinking that they were in some Spanish village square during the last paella party at the Inn. Well-wishers believed they remembered hearing the strains of flamenco music. If not actual reality, that was probably the only authentic element missing from the sun-blissed day. And was it hot ? Hardly a cloud in the sky. For some wide-brimmed hats and even a knotted hankerchief were seen gracing thinly thatched heads. Perfect... <strong>Click <a href="http://walterdecantelupe.co.uk/Joomla_Folder/content/view/30/69/" title="Paella Party">here</a> to read on...</strong> </p> <p>Tel. 01905 820572 <a href="mailto:martin@walterdecantelupe.co.uk">martin@walterdecantelupe.co.uk</a> Main Road, Kempsey, Worcester WR5 3NA</p> </body> </html> The CSS is Code: * {
margin: 0;
padding: 0;
}
body {
background: #506d42 url(images/bg.gif) repeat-x;
font-family: "Times New Roman", Times, serif;
font-size: 1em;
line-height: 17px;
color: #333;
}
a {
text-decoration: none;
color: #157D6A;
}
a:hover {
text-decoration: underline;
color: #37AB96;
}
#wrap {
margin: 0 auto;
width: 935px;
}
#header {
height: 130px;
background: #fff url(images/walter_header.gif) no-repeat left;
}
#header h1 {
font-size: 28px;
letter-spacing: 0px;
padding: 23px 0 0 20px;
color: #506d42;
}
#header h1 a {
color: #37AB96;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover {
color: #fff;
}
#header h2 {
font-size: 19px;
color: #fff;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}
#header p {
font-size: 12px;
letter-spacing: 0px;
padding: 23px 0 0 20px;
color: #506d42;
}
.slidedivtop {
border-top:2px solid #ffe385;
color:#933;
font-style:italic;
font-weight:bolder;
font-size:2.1em;
text-align:left;
letter-spacing:-1px;
font-family:"Times New Roman", Times, serif;
padding-bottom:0;
padding-top:5px;
margin-bottom:0;
text-transform:lowercase;
line-height:normal;
}
.slidediv {
background:#e9cf77 url(img/bottom.gif) no-repeat left bottom;
border-top:0 solid #ffe385;
color:#444;
margin-bottom:0;
padding:20px 20px 0;
}
#menu {
height: 70px;
line-height: 70px;
background: #fff url(images/menu.gif) no-repeat left;
padding-left: 10px;
padding-right: 10px;
}
#menudrop h1.drop {
font-size: 28px;
letter-spacing: 0px;
padding-top:3px;
text-align:center;
color: #506d42;
}
#menudrop {
height: 46px;
line-height: 70px;
background: #506d42 url(images/topdrop.gif) no-repeat left;
padding-left: 10px;
padding-right: 10px;
}
.menupadding {
padding-left: 9px;
display: block;
z-index:auto;
}
#menu ul {
list-style-type: none;
padding-left: 40px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 100;
font-size: 14px;
}
#menu ul li a:hover {
color: #37AB96;
text-decoration: none;
}
#content {
background: #506d42 url(images/content.gif) repeat-y;
padding: 0 20px 20px 20px;
}
#content p{
line-height:normal;
}
#contentdrop {
background: #506d42 url(images/contentdrop.gif) repeat-y;
padding: 0 20px 20px 20px;
}
.right {
float: left;
width: 630px;
text-align: justify;
padding-left:15px;
padding-right:15px;
padding-top:10px;
}
.right h2 {
font-size: 18px;
font-weight: 100;
padding: 15px 0 7px 0;
}
.right h2 a {
text-decoration: none;
}
.right h2 a:hover {
color: #37AB96;
}
.left {
float: right;
width: 230px;
padding-top: 10px;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 24px;
line-height: 24px;
background: #111;
color: #fff;
font-size: 13px;
}
.left ul {
padding: 10px 0 15px 10px;
list-style-type: none;
}
.left ul li a {
color: #157D6A;
text-decoration: none;
font-weight: 100;
}
.left ul li a:hover {
color: #37AB96;
}
.paddingtop {
margin-top:10px;
position:relative;
}
.paddingtopbot {
margin-top:10px;
margin-bottom:15px;
position:relative;
}
.whatson {
padding: 20px 20px 20px 20px;
position:relative;
}
#bottom {
background: #fff url(images/bottom.gif) no-repeat;
padding: 17px 0;
}
#bottomdrop {
background: #506d42 url(images/bottomdrop.gif) no-repeat;
padding: 23px 0;
margin-bottom:8px;
}
#paneltop {
height: 25px;
background: url(images/paneltop.gif) no-repeat left;
padding-left:10px;
padding-top:11px;
margin-right:15px;
}
#panelcontent {
background: url(images/panelcontent.gif) repeat-y;
text-align:justify;
padding-left:11px;
padding-right:12px;
padding-bottom:5px;
margin-right:15px;
}
#panelbottom {
background: url(images/panelbottom.gif) no-repeat;
height: 5px;
margin-right:15px;
}
#footer {
text-align: center;
font-size: 11px;
}
K so i'm new so Hi 1st of all. I'm currently doing a project for Uni and low and beghold it goes wrong on the night before the deadline. I will post the HTML, obviously the images won't load but the lines of text i've put into bold have a problem. They load fine in Firefox but whern I load them in IE they don't appear until either I scroll away and back to them or I highlight them. It seems like they momentarily change color to the back ground color. Any ideas? HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>Metal Gear Solid - Metal Gear Solid 1 - Characters</TITLE> <LINK rel="stylesheet" type="text/css" href="MyStyle.css"> </HEAD> <BODY> <P><A href="home.htm"><IMG src="imgs\logo.jpg" alt="Metal Gear Solid Logo" title="Metal Gear Solid Logo"></A></P> <DIV id="header"> <STRONG>Metal Gear Solid 1 - Characters</STRONG> </DIV> <DIV id="menu"> <UL> <LI> <A href="home.htm">Home:</A> </LI> <LI> Metal Gear Solid 1: </LI> <LI> <A href="MGS1storyline.htm">Storyline</A> </LI> <LI> <A href="MGS1characters.htm">Characters</A> </LI> <LI> Metal Gear Solid 2: </LI> <LI> <A href="MGS2storyline.htm">Storyline</A> </LI> <LI> <A href="MGS2characters.htm">Characters</A> </LI> <LI> Metal Gear Solid 3: </LI> <LI> <A href="MGS3storyline.htm">Storyline</A> </LI> <LI> <A href="MGS3characters.htm">Characters</A> </LI> </UL> </DIV> <DIV id="content"> <H3>The Heroes</H3> <H4>Solid Snake</H4> <P> <IMG src="imgs\Snake.jpg" alt="Solid Snake in Metal Gear Solid 1" title=" Solid Snake in Metal Gear Solid 1"> This is Solid Snake as he appears in Metal Gear Solid 1. Snake is the ‘Hero’ in the first instalment of Metal Gear Solid, as an ex member of FOXHOUND he is pitted against his former comrades to stop a nuclear disaster. A master in both sneaking and Close-Quarters-Combat (CQC) as well as extensive weapons expert with years of fighting experience, he is the ideal choice for the mission which requires only a single unit to be sent into the fray. </P> <HR> <H4>Hal ‘Otacon’ Emmerich</H4> <P><IMG src="imgs\Otacon.jpg" alt="Hal ‘Otacon’ Emmerich in Metal Gear Solid 1" title="Hal ‘Otacon’ Emmerich in Metal Gear Solid 1"> Hal Emmerich, nicknamed Otacon, is the master engineer and chief designer of Metal Gear REX. He soon realises the peril he has put the world under after creating REX and attempts to right his wrongs by helping Snake throughout his mission. </P> <P> He nearly stopped Snake killing Sniper Wolf as he became infatuated with her and her love for the wolves, however he soon realised he had to let snake do it for the ‘Greater Good’. </P> <P>Otacon and Snake later went on to form an anti-Metal-Gear group called ‘Philanthropy’. </P> <HR> <H4>Meryl Silverburgh</H4> <P> <IMG src="imgs\Meryl.jpg" alt=" Meryl Silverburgh in Metal Gear Solid 1" title=" Meryl Silverburgh in Metal Gear Solid 1"> Meryl Silverburgh is Colonel Campbell’s niece (although she was later found to be his daughter), she was on the island as a replacement soldier for FOXHOUND but refused to revolt with the rest of the unit and was imprisoned. She became Snake’s ally after he rescued her and started to fall in love with him. </P> <P>Meryl’s part in the game is determined by how the player reacts to Ocelot’s torture, if the player submits, Meryl’s life is taken and no more is heard about her. If, however, the player resists the torture Snake ends the game riding off on a snow mobile with her. </P> <HR> <H3>The Villains</H3> <H4>Liquid Snake</H4> <P> <IMG src="imgs\Liquid.jpg" alt=" Liquid Snake in Metal Gear Solid 1" title=" Liquid Snake in Metal Gear Solid 1"> Liquid Snake is the leader of the renegade unit FOXHOUND, commander of the Genome Soldiers and is the master mind behind the whole plot. He was created genetically along with Solid Snake and Solidus Snake from the remains of Big Boss. </P> <P>He too the DARPA Chief and Kenneth Baker as hostages and was bargaining for Big Boss’ remains so he could perfect his Genome troop. </P> <P> Ultimately he fell the victim of the FOXDIE virus and died before he could kill his twin Snake. </P> <HR> <H4>Revolver Ocelot</H4> <P> <IMG src="imgs\Ocelot.jpg" alt="Revolver Ocelot in Metal Gear Solid 1" title=" Revolver Ocelot in Metal Gear Solid 1"> Ocelot played the part of Liquid’s right-hand-man, he was famed for his cowboyish dress, spurs and a set of western style revolvers. As an expert in interrogation his job was to get the launch codes out of the two hostages. However he killed one once his real identity (that of a government official) was noticed. He then later set Snake up to activate Metal Gear REX by using the PAL card. </P> <HR> <H4>Psycho Mantis</H4> <P> <IMG src="imgs\PsychoMantis.jpg" alt=" Psycho Mantis in Metal Gear Solid 1" title="Psycho Mantis in Metal Gear Solid 1"> </P> <HR> <H4>Sniper Wolf</H4> <P> <IMG src="imgs\SniperWolf.jpg" alt=" Sniper Wolf in Metal Gear Solid 1" title="Sniper Wolf in Metal Gear Solid 1"> </P> <HR> <H4>Vulcan Raven</H4> <P> <IMG src=" imgs\VulcanRaven.jpg " alt=" Vulcan Raven in Metal Gear Solid 1" title="Vulcan Raven in Metal Gear Solid 1"> </P> <HR> </DIV> <DIV id="footer"> Page created by Joe Billingham 0711795 </DIV> </BODY> </HTML> My CSS body { background-color: maroon; } #header { text-align: center; font-size: xx-large; color: black; border: 4px groove white; padding: 0%; margin: 0em 0em 1em 0em; background-color: #999999; } #content { color: black; border: 4px groove white; margin: 0em 0em 1em 0em; padding: 1%; background-color: #999999; } #content img { float: left; padding: 4px; } #footer { text-align: right; font-size: small; color: black; border: 4px groove white; margin: 0em 0em 1em 0em; margin: 0%; padding: 1%; background-color: #999999; } #menu { text-align: center; color: black; border: 4px groove white; margin: 0em 0em 1em 0em; padding: 0%; background-color: #999999; } #menu LI { display: inline; } HR { clear: both; height: 1px; width: 75%; border: 1px solid maroon; } H3 { text-align: center; } UL { list-style-type: none; list-style-position: outside; } img { border-style: none; } Thanks in advance guys and gals. So I found this neat tutorial (here) It was easy breezy to use it, so I did. Weird thing at Firefox is.. as soon as I replace the href="#" with a real link... The background images disappear. And only keep working when HOVERED... Even weirder (for me) is that that issue doesnt exist in the other browsers?? Could anyone take a little look? Thanks. (example here, hover over the lonely looking text please) HTML Code:
<a href="http://www.xx.nl/airless-spuitwerk" class="button" >
<div class="left"></div>
<div class="mid"><div>30% KORTING OP AL ONS AIRLESS SPUITWERK » MEER INFORMATIE</div></div>
<div class="right"></div>
</a><!-- /button -->
Code: a.button{float:left;height:31px;text-decoration:none;*cursor:pointer;}
a.button:link .left{float:left;height:48px;width:17px;background:transparent url(images/button-edge-red.png) top left;}
a.button:hover .left{float:left;height:48px;width:17px;background:transparent url(images/button-edge-red.png) bottom left;}
a.button:link .right{float:left;height:48px;width:17px;background:transparent url(images/button-edge-red.png) top right;}
a.button:hover .right{float:left;height:48px;width:17px;background:transparent url(images/button-edge-red.png) bottom right;}
a.button:link .mid{
float:left;
height:48px;
color:#fff;
font-size:14px;
font-weight:bold;
text-align:center;
background:transparent url(images/button-edge-mid-red.png) repeat-x top left;
text-shadow:0 0 1px #000;
}
a.button:hover .mid{
float:left;
height:48px;
color:#fff;
font-size:14px;
font-weight:bold;
text-align:center;
background:transparent url(images/button-edge-mid-red.png) repeat-x bottom left;
}
a.button:link .mid div{
position:relative;
top:18px;}
I just put this site online: http://brightfutures.ca/international It works properly in all the firefoxes and chromes, and Internet Explorer 8 and 9. The problem is that I'm losing the columns and some of the formatting when I view it in Internet Explorer 7. I'm even getting a broken image link icon! I have to look at it through an emulator (browserling), or get a coworker to send me screenshots, since I'm on a Mac. So, you can imagine, it's super hard for me to figure out how to solve this, especially since I'm not an expert on dated browser compatibility. Any idea on how I can fix this? Any help on how I can change/make some code to fix this would be awesome and really appreciated. Here's IE7: Here's IE8: Hello, I am trying to solve a problem with my site. The banner for links in the top frame is supposed to be framed by two horizontal black lines. It appears the way it should in Safari and FireFox (both mac and PC versions) however in the PC version of IE versions 7 and under (8.0 works fine), the bottom line begins after the last part of the banner ends.....so it sticks way out to the right side of the page rather than dropping down and being flush with the left side of the page. I've tried including it in the table, making it part of its own table and leaving it as an independent image element which is how it is now. Nothing seems to work. Granted, I do not have a ton of experience with website development and was hoping someone here could let me know what I've done wrong and how to fix it. I've included an image of how it should look. The website is poizner.com The html code is below: Thanks! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Alan Poizner Photography </title> <SCRIPT LANGUAGE="JavaScript"> image1 = new Image(); image1.src = "portraits02.gif"; image2 = new Image(); image2.src = "editorial02.gif"; image3 = new Image(); image3.src = "weddings02.gif"; image4 = new Image(); image4.src = "digital02.gif"; image5 = new Image(); image5.src = "etc02.gif"; image6 = new Image(); image6.src = "contact02.gif"; // End --> </script> </HEAD> </head> <body link="white" vlink="white"> <div id=EchoTopic> <img src="topbar.gif"> <br> <table cellspacing="0" cellpadding="0" border="0" align="left"> <tr> <td valign="top"> <img src="alanpoizner.gif"> </td> <td> <img src="spacer.gif" hspace="75"> </td> <td> <a href="portraits2010/index.htm" target="mainFrame" onmouseover="image1.src='portraits02.gif';" onmouseout="image1.src='portraits01.gif';"> <img name="image1" src="portraits01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="editorial/index.htm" target="mainFrame" onmouseover="image2.src='editorial02.gif';" onmouseout="image2.src='editorial01.gif';"> <img name="image2" src="editorial01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="weddings2010/index.htm" target="mainFrame" onmouseover="image3.src='weddings02.gif';" onmouseout="image3.src='weddings01.gif';"> <img name="image3" src="weddings01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="digital/index.htm" target="mainFrame" onmouseover="image4.src='digital02.gif';" onmouseout="image4.src='digital01.gif';"> <img name="image4" src="digital01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="etc/index.htm" target="mainFrame" onmouseover="image5.src='etc02.gif';" onmouseout="image5.src='etc01.gif';"> <img name="image5" src="etc01.gif" border=0></a> </td> <td> <img src="divider.gif"> </td> <td> <a href="contact2010/index.htm" target="mainFrame" onmouseover="image6.src='contact02.gif';" onmouseout="image6.src='contact01.gif';"> <img name="image6" src="contact01.gif" border=0></a> </td> </tr> </table> <br> <img src="topbar.gif"> </body> </html> I own a domain - let's say its full URL is http://www.mydomain.com. In cPanel I created a sub-domain called "dev", whose URL would be "http://dev.mydomain.com". But it can also be accessed by typing this in the address bar: "http://www.mydomain.com/dev/" I then created a folder - call it "client" - in the dev subdomain, which would give that a URL of "http://dev.mydomain.com/client/" or, as above, "http://www.mydomain.com/dev/client/" Here's the issue: On a small site I have in the client folder, no images are displayed when the URL "http://dev.mydomain.com/client/" is used. BUT they are displayed when the other URL format is used (http://www.mydomain.com/dev/client/). Furthermore, when the "http://dev.mydomain.com/client/" URL is used, clicking on any link brings the browser to the other URL (http://www.mydomain.com/dev/client/). Is there a way to "force" the dev.mydomain.com/client URL to be used instead of being automatically redirected to the other address? I.e. some sort of htaccess rewriting or something more simple in the HTML code in the site itself? Thanks for any suggestions! Hello everyone. I'm in the middle of designing my new portfolio in ASP.NET and everything works fine in IE7 but once I opened the site up in FF, I was horrified by the outcome. I've been looking forever for a possible slip-up but I haven't been able to find anything that seems wrong. Firefox. Internet Explorer. CSS Code: html
{
font-family:tahoma;
background-image:url(img/background.png);
background-repeat:repeat-x;
background-color:#b5b5b5;
}
#header
{
background-image:url(img/body_top.png);
width:650px;
height:140px;
}
#body_middle
{
background:url(img/body_middle.png);
background-repeat:no-repeat;
width:650px;
}
#body_fill
{
background-image:url(img/body_fill.png);
width:650px;
background-repeat:repeat-y;
}
#body_bottom
{
background-image:url(img/body_bottom.png);
width:650px;
height:19px;
}
#menuwrapper
{
width:130px;
height:200px;
position:relative;
top:15px;
left:18px;
text-align:left;
padding:0px 0px 0px 0px;
float:left;
}
.menu
{
margin:5px 15px 0px 0px;
}
a
{
color:#c5c5c5;
}
.contentholderR
{
float:right;
width:475px;
margin:10px 20px 10px 20px;
}
.contentholderL
{
float:left;
width:475px;
margin:10px 20px 10px 20px;
}
.content_header
{
background-image:url(img/content_header.png);
background-repeat:no-repeat;
height:15px;
width:475px;
padding-left:15px;
font-family:tahoma;
font-size:15px;
color:#FFFFFF;
}
.content_mid
{
background-repeat:no-repeat;
border-left:solid 3px #c8c8c8;
border-right:solid 3px #c8c8c8;
width:459px;
min-height:150px;
font-family:Tahoma;
font-size:12px;
color:black;
padding-left:10px;
padding-top:10px;
}
.content_bottom
{
background-image:url(img/content_bottom.png);
background-repeat:no-repeat;
height:9px;
width:475px;
position:relative;
}
HTML Code: <%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="header"></div>
<div id="body_fill">
<div id="body_middle">
<div id="menuwrapper">
<asp:Menu ID="Menu" runat="server" CssClass="menu" DataSourceID="SiteMapDataSource1" StaticDisplayLevels="3" BackColor="White" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#C8C8C8" StaticSubMenuIndent="10px" DynamicEnableDefaultPopOutImage="False" Width="124px">
<Items>
<asp:MenuItem Text="dasdasf" Value="dasdasf"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
</Items>
<DynamicHoverStyle BackColor="#E5E5E5" ForeColor="#FAA019" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" ForeColor="Black" />
<DynamicMenuStyle BackColor="#F7F6F3" />
<StaticSelectedStyle BackColor="#E5E5E5" Font-Bold="True" Font-Names="Verdana" Font-Overline="False" ForeColor="Black" />
<DynamicSelectedStyle BackColor="#E5E5E5" ForeColor="Black" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" ItemSpacing="1px" BackColor="White" />
<StaticHoverStyle BackColor="WhiteSmoke" ForeColor="Black" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<div id="contentwrapper">
<div class="contentholderR">
<div class="content_header">
<asp:ContentPlaceHolder ID="content_header_1" runat="server">
Lorem Ipsum</asp:ContentPlaceHolder>
</div>
<div class="content_mid">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="content_bottom" style="font-size: 12pt; font-family: Times New Roman"></div>
</div>
<div class="contentholderL" style="font-size: 12pt; font-family: Times New Roman">
<div class="content_header">
<asp:ContentPlaceHolder ID="content_header_2" runat="server">
Lorem Ipsum</asp:ContentPlaceHolder>
</div>
<div class="content_mid">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="content_bottom"></div>
</div>
<div class="contentholderR">
<div class="content_header">
<asp:ContentPlaceHolder ID="content_header_3" runat="server">
Lorem Ipsum</asp:ContentPlaceHolder>
</div>
<div class="content_mid">
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="content_bottom" style="font-size: 12pt; font-family: Times New Roman"></div>
</div>
</div>
</div>
</div>
</div>
<div id="body_bottom"></div>
</form>
</body>
</html>
Can someone point out what I'm doing wrong? Hi everyone, Recently i changed my portfolio page, and the new layout I have now has a Iframe in it. But for some strange reason when I press the menu-buttons on the right side I have to press it twice Portfolio Source Code from one of the Iframe pages: HTML Code: <html>
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #000;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"><a href="Contact.html" target="_self"><img src="images/Contact_left.jpg" border="0"/></a></td>
<td width="20"><a href="Downloads.html" target="_self"><img src="images/Downloads_left.jpg" border="0"/></a></td>
<td width="20"><a href="ICT-Beheer.html" target="_self"><img src="images/ICT-Beheer_left.jpg" border="0"/></a></td>
<td width="825" align="center" valign="top" background="images/Webdesign_center.jpg"><br />
<br />
<br />
Welkom,<br />
<br />
Momenteel ben ik bezig met opvullen en indelen van de pagina's op deze site.<br />
Er zijn dus nog geen pagina's te bekijken.<br />
<br />
Kom gauw weer een keer terug zodra de website definitief af is!<br />
<br />
Mvg, Dream3R</td>
<td width="20"><a href="Portfolio.html" target="_self"><img src="images/Portfolio_right.jpg" border="0"/></a></td>
<td width="20"><a href="About.html" target="_self"><img src="images/About_right.jpg" border="0"/></a></td>
<td width="20"><a href="Home.html" target="_self"><img src="images/Home_right.jpg" border="0"/></a></td>
</tr>
</table>
</body>
</html>
I tried removing the Targets.. but no result, but its the only thing I could think of.. I have an html document (not a webpage) which I'm converting into a .pdf. I've created it before without any issue but now I'm noticing that when I click on the back button (after clicking on an internal link) that it does one of two things... It either a) returns me to the top of the document or b) takes me to some arbitrary spot in the document. Neither one being where I or my clients need to get back to. Anybody experience this or have a fix? Thanks, Hunter Please take a look at this page: http://lifeengineering.org/ Try out the menu links and see what I'm talking about. The "short" pages shift horizontally. In other words, if the div block with the content doesn't reach the bottom of the browser window, then it's rendered in a different horizontal position. So, changing the pages through the menu makes the pages appear to "jump". NOTE: You'll need a reasonably big resolution to see what I'm talking about (e.g. 1152 x 864+). Any suggestions on how to correct this? Is there a way to pad blank spaces at the end of my content in the div block to ensure that it always reaches the end of the browser window? Or something similar? ------ Issue #2: My background isn't ideal. I like the rainbow, but I'd like to change it. If I wanted to make the rainbow arc appear stationary as I scroll the page (i.e. to have the upper left arc of the rainbow always appear on the upper left corn of the screen), how would I do it? Any other suggestions, artistically, with respect to the page background? Thank you kindly! Hi, I've been making a website but have only been testing it in Internet explorer, now I've tried opening it in Firefox and noticed alot of problems. When I open it in IE, there is about a 4-5mm gap at the top before the header appears andeverything is positioned fine because I have layed it out this way, but in Firefox the gap at the top doesnt exist and therefore everything is a few millimeters out of position (text, images etc). Is there anyway that I can get rid of this gap at the top of the IE page so that it looks the same? I have tried margin-top with no luck. CSS code: Code: /*This first piece of 'body' code defines what colour the background of the whole website is. It is set to #000000, I.E. black.*/
body
{
background: #000000;
color: white;
}
div#site
{
display: block;
color: #000000;
margin-top: -10px;
}
/*This header code sets the size and background image of the header section of the website. It sets the image to a picture I have created called
'header2', and the code also needs to link to the image as it's not in the same folder as the css/html files, so the code 'images/header2.gif'
finds the file 'header2.gif' in the sub-folder 'images'. */
#header
{
background: url(images/header2.gif);
width: 865px;
height: 143px;
}
/*This header .text section defines any text properties that will be used if I decide to add any text to the header area.*/
#header .text
{
position:relative;
top:42px;
left:322px;
word-spacing: 24px;
font-size: large;
}
/*The navbar2 section of code defines how the navigation bar is set out. The width is set at 70% so that the bar doesnt go all the way across the
screen. It is also center-aligned to make the page look neat.*/
div#navbar2 {
width: 70%;
border-top: solid #000 0px;
border-bottom: solid #000 0px;
background-image: url(images/button.gif);
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
/*This code sets how the text should be layed out on the navigation bar. It has margins and padding to place it in the centre of the buttons.
It also sets the text colour to white.*/
div#navbar2 li a {
text-decoration: none;
margin: 20px;
padding: 7px 15px;
color: #FFFFFF;
}
div#navbar2 li a:visited {
color: #FFFFFF; /*This code is used so that when people click on the links, they stay white next time rather than changing colour.*/
}
div#navbar2 li a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #FF00FF; /*This code causes a pink/purple box appear around the text when the cursor is hovered over it.*/
}
/*The content code sets the background image of the main section of the website, and defines where on the page it should be placed.*/
#content
{
background: url(images/content.gif);
width: 865px;
height: 534px;
margin-left: 0px;
margin-right: 0px;
float: left;
margin: 0px 187px;
}
#content_nobars
{
background: url(images/content_nobars.gif);
width: 865px;
height: 534px;
margin-left: 0px;
margin-right: 0px;
float: left;
margin: 0px 187px;
}
/*The content .title, .title2 and .title3 sections of code define where each title should be placed, what text size and colour it should be,
and also how wide/tall the text box is allowed to be.*/
#content .title
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:215px;
width:500px;
height:18px;
overflow:hidden; /*This 'overflow' command stops the text box from spreading all of the page if too much information is placed into it.*/
/*If any extra text is in an area and there is no more room, the page will just hide it from sight, therefore keeping tidiness.*/
}
#content .text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 255px;
width:500px;
height:80px;
overflow:hidden;
}
#content .title2
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:375px;
width:500px;
height:18px;
overflow:hidden;
}
#content .text2
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 415px;
width:500px;
height:80px;
overflow:hidden;
}
#content .title3
{
color: #CC66FF;
font-size:16px;
position:absolute;
text-align:left;
left:515px;
top:541px;
width:500px;
height:18px;
overflow:hidden;
}
#content .text3
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:500px;
top: 580px;
width:500px;
height:80px;
overflow:hidden;
}
#content .read_more
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 168px;
width:100px;
height:16px;
overflow:hidden;
}
#content .read_more2
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 318px;
width:100px;
height:16px;
overflow:hidden;
}
#content .read_more3
{
color:black;
font-size:14px;
position:relative;
text-align:center;
left:355px;
top: 468px;
width:100px;
height:16px;
overflow:hidden;
}
#content_nobars .about_us_text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:480px;
top: 425px;
width:550px;
height:250px;
overflow:auto;
}
#content_nobars .other_title
{
color: #000000;
font-size:24px;
text-decoration:underline;
position:absolute;
text-align:center;
left:510px;
top:200px;
width:500px;
height:30px;
overflow:hidden;
}
#content_nobars .other_text
{
color:black;
font-size:14px;
position:absolute;
text-align:left;
left:480px;
top: 250px;
width:550px;
height:432px;
overflow:auto;
}
#content_nobars .about_us_picture
{
background: url(images/1.jpg);
width: 290px;
height: 175px;
position:relative;
left:130px;
top:50px;
}
/*The footer code defines the location of the footer image, and the size of it.*/
#footer
{
background: url(images/footer.gif);
width: 870px;
height: 105px;
}
/*These 2 commands keep URL links coloured black, before and after they have been visited.*/
a:link { color:black }
a:visited { color:black }
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--This head code defines the title that is displayed at the top of the screen on the Browser's bar. It also links the html document to the css file which will be used to create the layout and look of the website.--> <head> <title>Pampered Pooches Grooming</title> <link rel="stylesheet" type="text/css" href="pampered-pooches-grooming.css"> </head> <!--This code uses different div tags in conjuction with the css file, which will each be layed out according to individual needs.--> <body> <div id="site"> <div id="header"> </div> <div id="navbar2"> <ul> <!--This code creates a list of the navigational links to other pages of the website--> <li><a href="index.html">Home</a></li> <li><a href="aboutus.html ">About Us</a></li> <li><a href="services.html ">Services</a></li> <li><a href="theparlour.html ">The Parlour</a></li> <li><a href="dogofthemonth.html ">Dog of the Month</a></li> <li><a href="contactus.html ">Contact Us</a></li> </ul> </div> <div id="content"> <!--This footer code is placed at the bottom of all of the other code so that it appears at the bottom of the screen in the webpage.--> <div id="footer"> </div> </div> </body> </html> Thanks for any help. Hey guys, hope someone can help. I have a website that is displaying correctly in FF 3.05 but incorrectly in IE7 If you look at this page in FF and then IE you will see the problem... http://www.debt-rescued.co.uk/applynow.html Hope someone can help Hi, I am creating a page with a navbar. The navbar have few buttons which are clustered towards left of the bar. This shows correctly in the dreamweaver; but the buttons are completely spread out in the browser view. Please help me to correct this problem Quote: <table align=center border=0 cellpadding=0 cellspacing=0> <tr> <td colspan=3 align=center > <img src="Graphics/myhotdrinks.jpg"> </td> </tr> <tr bgcolor="#000000"> <td> <table class="navbar" width="724" > <tr> <td width="52" style="max-width:5px"> <a href="index.asp"> <font face="Arial, Helvetica, sans-serif" >Home </font> </a> </td> <td width="74" style="max-width:5px" > <a href="products.asp"> <font face="Arial, Helvetica, sans-serif" > Products</font> </a> </td> <td width="67" style="max-width:5px" > <a href="contactus.asp"> <font face="Arial, Helvetica, sans-serif" > About us</font> </a> </td> <td width="69" style="max-width:5px" > <a href="register.asp"> <font face="Arial, Helvetica, sans-serif" > Register</font> </a> </td> <td width="438"></td> </tr> </table> </td> </tr> Regards, John I am new at al of this and I just stood up a site and thought everything was going well, it looked great, I validated the code, life was good. until I looked at it in IE. It's WAY messed up! Its got horizontal and vertical scroll bars IN the page, and the tabs I made don't look quite like they are supposed to. I have no Idea how to fix it, I am hoping someone on here can look at my page in IE and look at my code and help me out here. my site is http://pughs.no-ip.org to look at it, and I will post my code he 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>
<title>
Pugh's World - Freedom of Information
</title>
<link rel="stylesheet" href="default.css" type="text/css" />
<link rel="shortcut icon" href="i.jpg" type="image/x-icon" />
<script type="text/javascript" src="klappe.js"></script>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" style='background: transparent'>
<tr>
<td class="clear" width='49%' >
</td>
<td class="clear" align="center">
<a href="/"><img alt="Pugh's World" src="ilogo.jpg" border="0"/>
</a>
</td>
<td class="clear" width="49%" align="center">
</td>
</tr>
</table>
<div align="center">
</div>
<!--TABS-->
<table class="mainouter" width="94%" border="1" cellspacing="0" cellpadding="10" align="center">
<tr>
<td class="outer" align="center">
<ul id="tabnav">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="blog.html" >Blog</a></li>
<li><a href="about.html" >About</a></li>
</ul>
<!--MAIN TABLE HEADER-->
<table cellpadding="4" cellspacing="1" border="0" style="width:737px" align="center">
<tr>
<td>
<table style="width:100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bottom" align="left">
<span class="smallfont">
Welcome to Pugh's!
<br/>
<font color="blue">Last Blog Post:</font> <font color="darkred">(never)
</font>
<br />
</span>
</td>
<td class="bottom" align="right">
<br />
</td>
</tr>
<!--CONTENT TABLE-->
<tr>
<td class="bottom"><br /><b>Site is Back Up!</b> - 8-21-2008 18:55:34
</td>
</tr>
<tr>
<td class="bottom">
<table class="main" border="0" cellspacing="0" cellpadding="0" style="width:100%">
<tr>
<td class="text">
<p>Well, so far there is absolutely no content, but at least we are back up!<br />
</p>
<h1>Check back for updates!
</h1>
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
<br /><br /><br />
</td>
</tr>
</table>
<p class="footer">
©2008 John Pugh
</p>
</body>
</html>
Hi I have a problem with a page that i have just created. It looks great in explorer but when i open it with firefox, chrome ans safari it doesn't look that good anymore. Tables are not aligned the way they are supposed to be and pictures are not in their places.... What is the problem?? Thanks a lot for all the help Best, B Hello, I am running a Dotnetnuke website and I am running a News Feed module. In the template, I have the code below. I made the font size smaller to decrease the space between each feed. This works in IE 8 (smaller space between news items), but not IE 7. Any advice? <table><tr><td><a href='[Link]'><strong><span style="font-family:century gothic;font-size:14; color:#000000;">[Title]</span></strong> <span style="color:#000066"> Read More...</span><div style="font-size:4px;"><br/></div></a></td></tr></table> Thank you in advance! Matt Sabatello msabatello@brookhaven.org 631-960-8650 Greetings and thanks for checking my question out. I oversee an academic site for mostly text at www.zeitschrift.co.uk and when I recently updated it with new material, specifically at www.zeitschrift.co.uk/v4n1jryskamp, it will not seat properly in the browser window, but this page seems to work ok with explorer. Does anyone have any suggestions. Much appreciated, HTML Dad |
|||||||