|
HTML - Bowser Displays Differently Text Positioning
I'm very new to html and have just started making a website in dreamweaver to build a digital portfolio of design work.
The problem is, is that I need my navigation text to be in an exact part of the page (it fills in a section with the table background). When I started making the site it displayed fine in firefox and safari, but not in a few versions of IE I tried. I'm sure there's a solution for this and if anyone could help it would be much appreciated. I've included a link to a test page so you can see what I mean: http://www.digitodd.net/aurora.html Thanks Similar TutorialsI 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>
Can someone please help me position my text entitled "Latest News..." not all the way left but not center, I would like it aligned with the main picture on the site. I have uploaded two pictures, one showing the way I would like it to appear and the other showing how it is incorrectly displayed. From my site http://www.trillionaireme.com Hello Kindly help me ..... as shown in the picture i want to move the text from the right side of the images to the bottom of it how? I've placed some images on this page: http://gmjones.org/Employments.html I added text under the two images on the left by trial and error, as a result, the look out of place! What's the proper way to add text under a separately placed image via the html coding? Thanks in advance. Hi, I usually use frames to split my pages into sections. No problem the But you can think that having a page with over 25 frames defined in the HTML code is quite confusing at times. I wanted to ask if and how it is possible to position an image/paragraph/table/etc. at exact pixel-coordinates. My example: I want to place an image at (50px|50px) and a table at (200px|100px) Thanks in advance.... PS: (x|y) Hello i have a simple site with a background color, and image and a scrolling text box. What is the appropriate code to position the box using the image as the reference point, not the corner of the screen so the text always goes to the same spot on the screen. Code: <div align="center"><img src="EA-vendorapplicationimage.jpg" alt="Eclectic Affinity Vendor Information Form - Become an Eclectic Affinity WHole Sale Vendor" align="absmiddle"></div> <body> <div class="ss-base-body" dir="ltr"> <div style=" overflow:auto; position:absolute; height:509px; width: 698px; top:172px; left:241px;"> The code above works to keep the box in one location, but that location is from the top left of the screen which is only useful if everyone used the same screen. Thanks Hey all, I'm new here and I have a website i designed. The page appears fine when i go to IE but it's all messed up when I view it using Mozilla. I'm stumped. This is my website: www.secondhandoffroad.com Thanks, I have been working on this website for awhile...all along everyone I checked with says it looks good. I have been doing editing at work and one person said it looked bad. I just thought it was his browser, but of course when I checked it at home -- mine looked horrible too. Almost like my browser isn't listening to the 1028X766 display... Can someone look at my mess of a code and see if I am missing something? Thank you, Todd http://tarrytownvets.com 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 Help me out here, PLEASE SCROLL ALL THE WAY DOWN. ITS URGENT Im making a mail template. Firefox displays the picture, IE won't. It shows it as a empty square with a red X. I cant see what im doing wrong.. i bet its a tiny missing link in some code. Thanks HTML Code: <br /> <p align="center"><img src="koord.jpg" width="170" height="190" /> <br /> 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>Template</title>
<style type="text/css">
/* MAAK HEM GECENTREERD
Blokjes bovenaan de PSD toevoegen..
3 onderdelen website maken
- TOP
- BLOKJES
- BOTTOM
*/
#container{ position:absolute;
margin:0 auto;
}
#pic {position:absolute;
left:18px;
top:55px;
z-index:0;}
#txt {
font-size:16px;
width:410px;
position:absolute;
text-align:left;
font-family:Verdana;
left:84px;
top:194px;
width:600px;
z-index:1;
}
</style>
</head>
<body>
<div id="pic"><img src="template.png" /></div>
<div id="txt">
<p><strong><font color="#410d3e">Nieuwsbrief Februari 2010</font></strong>
<br />
<br />
Beste Lezer van mijn eerste nieuwsbrief,<br />
<br />
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van Sessio Communications.
<br />
<br />
<p align="center"><img src="koord.jpg" width="170" height="190" />
<br />
<a href="http://www..com">www..com</a></p>
<br />
Ik nodig je van harte uit om <a href="http://www..com">mijn website</a> te bezoeken. <br />
Reacties zijn welkom. Doorsturen naar andere belangstellenden mag.
<br /><br />
Mocht je geen belangstelling hebben om op de hoogte te blijven van mijn verschillende workshops en trainingen dan kun je dat via onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
<br /><br /><br />
Met vriendelijke groet,
<br /><br />
Jan M.M. Boesten<br />
<font size="2"><a href="http://www.sessio-communications.nl">www.sessio-communications.nl</a></font><br />
<br />
</div>
</body>
</html>
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'm sure this is simple, but this page http://www.janitorman.net/blueskies/index-1.html shows up OK in IE but not in Firefox. Have I got something wrong? Newbie welcomes some help. 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. 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! Today I tried to display my website alittle bit differently. no major changes to it but I just made sure the website would be displayed nicely in the middle and that the sides of it would disapear (Click with either firefox or chrome on the link below, to see what I mean) however for some very annoying reason IE does not show the website correctly... while I didn't change the container box that holds the website, other than giving it a piece of the background to hold... and the rest of the code has been working perfectly before in the 3 common browsers (IE, FF, Chrome) Could somebody tell me what I did wrong, or what I should do to make IE display the website correctly? Thanks in advance for the help The website Adress is: http://www.swan10.nl/Test/index.htm Feel free to comment on any of the sourcefiles, regarding improvements, they would be gladly appriciated 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 am wondering if someone can help me with a little problem, in Firefox my site http://www.fifesouthernrfc.com/1stxv_profiles.html, displays incorrectly.# It should be 2 columns of profiles split into 2 sections by a header. However the second header does not do this, but instead, pushes my 2 columns apart and splits the header in 2. Thanks for looking. 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! I am an amateur website hack. I did everything in notepad pulling javascript from some free sites. My intention was to have the center image with "Lindsey Teefey" and the bottom page links vertically and horizontally centered on all the pages. I got the pages to look as intended in Firefox and IE, but they look very bad in Safari. I am sure my coding is very amateur and I would appreciate a clean up from an expert. The pages that I have up a http://www.littlebrindle.com/LT/index.html http://www.littlebrindle.com/LT/photos.html http://www.littlebrindle.com/LT/listen.html (no songs have been added yet) Thanks for any help you can give. Blessings. |
|||||||