|
HTML - Heading Shows As One Word Per Line In Ie But Not Moxzilla, Etc
I'm having trouble with a header in IE. I'm a beginner but modifying a webpage.
I have a header that when opened in Firefox or Chrome stretches normally across a page, e.g. "This is the header" However, when I open the same page in IE, I'm getting one word per line, e.g. "This is the header" Does anyone know how to resolve this please? I'd be very grateful for any help Similar TutorialsI'm using tables and I have text inside one table. When I add line height to text so it looks good in IE6, Safari and Google Chrome, it looks wrong in FireFox and Opera. Every line is over each other. How could I fix this? Here is the code from start to end of the text part: Code: <html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
<title>my site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image:url('tausta.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
line-height: 5%;
}
.style2 {color: #
color: #999999;
color: #999999;
}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; }
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #999999; line-height: 5%; font-weight: bold; }
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="page">
<table id="Table_01" width="912" height="543" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="14" width="176" height="542" valign="top"><div align="right" class="style1">
<p class="style2"> </p>
<p class="style2"><strong><u>FILES:</u> </strong><u><br>
</u><br>
<br>
<br>
<br>
</p>
</div>
<p align="right" class="style5">Images: </p>
<p align="right" class="style4">images1 <br>
<br>
<br>
<br>
</p>
<p align="right" class="style5">Videos: </p>
<p align="right" class="style4">video1 </p>
<p align="right" class="style4">video2 </p>
<p align="right" class="style4">video3 </p>
<p align="right" class="style1"><span class="style2">1 - video4 </span></p></td>
this issue has been solved So here goes: i have to make a heading for my web page (that has to be made using html) and it has to be: -centered -times new roman -and font size 6 -bold .... is this right? or am i suppose to somhow use those <h1> tags. <!--heading--> <div id="header" align="center" style="z-index:5"> <b><font color="#ffffff" size="6" face="Times New Roman">My heading</font></b> </div> <!--end heading--> ....okay and another one: how do i put an image behind the text. i know how to put a coloured block behind it, but when i try to put an image behnd the heading, the text goes behind the picture.... i did it like this: <!-- Heading --> <div id="header image" align="center" style="top: 0px; left: 9px; position: absolute; z-index: 4; width: 1239px; height: 58px"> <img src="background.png" width="1245" height="61" alt="header"> </img> </div> <!-- Heading --> please hepl?!?!? I have made a box mostly from 3 divs a top middle and bottom, when I add any h1 element makes a gap between the top and the middle killing the box effect in FireFox. I have tried everything with this but now give up, does anyone have any ideas on how to fix this. I have added a another div called maincontentinner so that the text was easier to adjust but even removing this did not solve it. All I am trying to do is get rid of the tables layout and have hit a brickwall my html HTML Code: <div class="mainboxtop"></div>
<div class="maincontent">
<div class="maincontentinner"><!--All content starts here-->
<h1> More Information</h1>
this is a test
</div><!--All content stops here-->
<div class="mainboxbottom"></div>
</div><!-- /closing of maincontentdiv -->
the CSS Code: .maincontent {
background:#CFCFCF url(../images/contentmain.gif) repeat scroll 0%;
border:0;
width:710px;
}
.maincontentinner {/*added to give padding inside the box and a few other styles*/
padding-left:15px;
padding-right:15px;
font-size:1.2em;
}
.mainboxtop {
background:#CFCFCF url(../images/contenttop.gif) no-repeat scroll 0%;
border:0;
height:26px;
margin:0;
padding:0;
width:710px;
}
.mainboxbottom {
background:#CFCFCF url(../images/contentbottom.gif) no-repeat scroll 0%;
border:0;
height:26px;
width:710px;
}
Here's a test page to see it for real Hello everybody, As you can see here http://arturbuchhorn.com/index.html the h2 element is displayed right alongside the navigation. What would be the best way to move the heading below the navigation? Thank you. PS: I would prefer a CSS solution if possible. The code is right he Code: /*
CSS for Un Buchhorn en route
*/
a:visited {
color: black;
}
#sitebranding a {
border: 3px solid white;
padding: 20px 10px 20px 10px;
}
#sitebranding a:hover {
background-color: #FFE4C4;
}
#tagline {
margin: 2em 0 1em 0;
}
#navigation {
}
#navigation ul li {
list-style-type: none;
float: left;
margin: 0px 5px 0px 0px;
}
#navigation ul li a {
background-color: #FFE4C4;
text-decoration: none;
border: black 1px solid;
border-bottom: none;
padding: 0 10px 2px 10px;
}
#navigation ul li a:hover {
background-color: #F5DEB3;
}
#navigation ul li a:visited {
}
#bodycontent {
}
body {
font-family: Calibri, Arial, Verdana, sans-serif;
background-color: #F5DEB3;
}
#essay {
text-align: justify;
margin: 0 15% 0 15%;
}
#worksList ul {
margin: 3em 0 3em 0;
}
#worksList ul li {
list-style-type: square;
line-height: 200%;
}
#worksList ul li a{
text-decoration: none;
}
#footnotes {
font-style: italic;
text-align: left;
}
h1 {
font-family: "Jayne Print";
font-size: 200%;
}
h1 a {
text-decoration: none;
}
h2 {
font-size: 125%;
font-weight: normal;
}
#footer p {
font-size: 60%;
font-family: Arial;
font-style: italic;
}
#adsense {
position: absolute;
right: 0;
top: 5%;
}
#pagedoesnotexist p {
margin: 20% 20% 20% 25%;
color: red;
font-size: 125%;
}
Hello, I am new to web design and am just learning the basics right now. I am trying to have an ad banner show up to the right of the main heading for my site. What would be the best way to have these two show up side by side within the same div box? Is there a way to turn off the line break that naturally occurs with headings? Thanks for your suggestions in advance! Here is some of the code I am working with: Code: <div class="heading"> <h1><a class="header" href="home.htm">Plotbound.com</a></h1> <script type="text/javascript" src="http://x10hosting.com/adserve.js?kaoticja"></script> </div> And the CSS: Code: div.heading
{
background-color: #ffffff;
border-bottom: 3px ridge #000000;
border-left: 3px ridge #000000;
margin-bottom: 10px;
}
- Jack Hi everyone, I'm sure there's a simple answer to this one but I can't work it out. I have a heading <h1>Services</h1> and want to align some text next to this, not below it. <p>blah blah blah</p> places the text below. What would align the text directly to the right of the heading? Many thanks Phil My website home page has no h1 tag, only a h3 tag, and that was used to create a heading of a certain font size. My spider simulator reports there in no h1 tag, suggesting that isn't good for SEO. Should I make sure there is a h1 tag somewhere, and can that be anywhere on the page? (It's not a heading as such). I want a certain sentence to be the h1 tag as it contains several of the keywords. Can I make these changes and dump the h3 tag, leaving only one h1 tag? And can it be done locally rather than in a css file? My website uses the Woo Canvas theme in Wordpress. I have created a image background for the heading by writing index. but when i run on my machine i can see the image. where as after placing on the web sever i couldn't see the image. please do help me in this regard. <style type="text/css"> img.b { position:absolute; left:440px; top:10px; z-index:-1 } </head> <BODY> <form name='app'> <h1 align="center"><b>aduit application</b></h1> <img class="b" src="dock1.gif" width="380" height="60"> Hi: I wish to place a heading in the middle of a horizontal line (i.e., maybe using <hr /> ??) at various places in my page. That is, I would like a line in my page to look like: ----------------------------------- NOTICES --------------------------------------- How can I do this please ? Thanks, -Mel Smith Hey guys! It's been awhile, but life has been busy and doing new things with web pages hasn't been on the top of my list. However, I've run into a small issue which will hopefully be easy to solve. I've been doing some scripting for a program which exports and imports scripts in an XML setup. I've been posting those scripts on another site, and, for now, have been instructing users to simple right+click save as... the scripts in order to get them, because, when they click on the link, it tries to bring them to a page of the XML. Is there any way for me to tell the links to simply download the XML file (effectively like right+click save as... except it will go to wherever they download stuff) if it is clicked? Hello. I own a website called The Dakini Hut (located at http://populous.strategyplanet.games.../thedakinihut/). I'm having problems with my site, though. You see, I recently updated the layout and its really screwing up, but one of the major problems I'm having is that the whole page won't show. The navigation bar cuts off halfway and you can't see all of the pages/links. This only happens on pages where the navigation bar goes down further than the other tables. Can anyone help me fix this? By the way, it works fine in Firefox and Opera, just not in IE. Hi Everyone, i have a peculiar problem with IE6. The header on of the site I am working on right now (http://www.mobilitynow.de) is a DIV Container in which I am loading several PNG images (without transparency). They have a Java script rollover effect. In IE6 (not in any Firefox, Opera or higher Version of IE) the BG where the images are to be placed is shown red while the loading of the images is in progress. Anyone has an idea what the problem might be. Suggestions would be really appreciated. Thanks a lot, Jonathan Cant understand why the HTML code is showing on my webpage http://www.mcaorals.co.uk/Fraserburgh%20History.htm also I've another problem, I've checked the coding in W3 http://validator.w3.org/ and I have no errors, but I cant understand why this webpage is getting very little hits, I'm usual around 60 - 65 place with the keyword "Fraserburgh" any help would be grateful thanks in advance Navteacher Hi, I know how to include default text in a text area box, but is it possible for it to show a .txt file on the server, would the page need to be php for this? thanks Ok so i have this webpage designed, have a bunch of images/shortcuts in a big table. When i view it in google chrome, it looks like its supposed to, no border around frames. EXAMPLE CLICK HE http://www.pictrace.com/i/wtfborders2.gif When i view it in IE and FF, the tables have red borders, how would i disable that? EXAMPLE CLICK HE http://www.pictrace.com/i/wtfborders1.gif View the source code here http://www.jasonparkerracecars.com/bikes/ Any advice is appreciated. This image only shows when the doctype is NOT declared, and I can't figure out why. Code: <img src="images/logo.jpg" alt="" /> And here is my doctype: 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"> I ran the page through the W3C validator and there's no errors.... I'm pulling my hair out because I don't understand why an image would disappear when the doctype is removed. Anybody know why? Hi Guys, I'm trying to put together a simple feedback form floating on top of my background image. However the form shows up with scroll bars on right side and bottom of the form. I've no idea why. How can I get it to just show up as normal without the scroll option? Thanks guys! HTML Code: <style type="text/css">
#main {
width:689px;
margin:auto;
font-family:verdana,sans-serif;
font-size:12px;
}
#header {
height:600px;
width:700px;
background-image:url(http://i827.photobucket.com/albums/zz193/colinbrady1985/CLUB/ClubApp02.
jpg);
}
#header a {
float:left;
width:140px;
height:115px;
text-indent:-9999px;
}
#header div {
float:left;
width:360px;
height:107px;
padding:10px;
color:#fff;
overflow:auto;
}
img {
display:block;
border:0;
}
form {
width:517px;
padding-top:10px;
margin:0;
background-color:#01abe8;
}
form p {
padding:0 5px;
font-size:11px;
color:#fff;
text-align:center;
}
form div {
padding-bottom:10px;
}
form label {
float:left;
width:146px;
padding-left:5px;
color:#fff;
}
form .required{
font-size: 13px;
color:#f00;
}
form .btn {
margin-left:153px;
}
form .btn1 {
margin-left:150px;
}
</style>
<div id="main">
<div id="header">
<a href="">albums</a>
<div id="text"><font size="4" face="Arial">
<div>
<div style=" top:245px; left:45px;">
<form method="post" action="sendmail.php">
Email: <input name="email" type="text" /><br />
Message:<br />
<textarea name="message" rows="8" cols="20">
</textarea><br />
<input type="submit" />
</form>
</div>
</div>
</div>
</div>
Hi Folks, Newbie to this forum so looking for somebody's HTML eyes to see where the problem is. I have a simple flash header above my main content body but for some reason it shows a space below it which is viewed only in Firefox. I've tried using a div instead of a table but the space is still there I also used an image instead of the swf file and there isn't any space..displays perfectly. I've used different swf files and all each shows that space. Works fine in IE. Can somebody see the problem, would be very grateful? <tbody> <div id="header"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="766" height="189"> <param name="movie" value="header.swf" /> <param name="quality" value="high" /> <embed src="header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="766" height="189"></embed> </object> </div> </table> Hi guys, im a secretary in an office and my boss asked me to edit his website. He had some1 create it for him, and he doesnt know how to fix a certain problem. Basically, everytime we search for the site "Property in Negril For Sale" The site (www.NegrilProperty4Sale.com) in google, the title just comes up as index. Someone told me its an html problem. Im in Yahoo Web right now looking at 3 different HTML files, and I don't know what to do. |
|||||||