|
HTML - Why Did It Render Like That?
I just put the final touches on the design of my site, livecapoeira.com but the homepage doesn't render quite how it does in a preview viewed locally on my machine.
I'm using Dreamweaver if that helps, but could someone point out or explain why the background of the footer (where the about us/contact us) is floating at the top in the navigation bar? I've been staring at it but can't figure it out. Similar TutorialsHi there, I am currently designing a website for an art gallery. I thought I had finished it today while viewing it in firefox on my mac, but when I went to view it on internet explorer on a PC the page is not rendered properly! i don't know what to do! I have 2 divs - centercol & rightcol - centercol displays the main content, and rightcol displays an image specific to the content on the page. on my mac it shows like this: on a PC in internet explorer it shows like this: website is at http://pennystewartdesigns.com/merrepen/html/main.html NB: Main page functions fine, but when you click on any other tabs the rightcol displays below the main content in IE. My code is 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>Merrepen Arts | About Us</title>
<link rel="stylesheet" href="http://pennystewartdesigns.com/merrepen/html/style.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://pennystewartdesigns.com/merrepen/html/coin-slider-styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://pennystewartdesigns.com/merrepen/html/menusm.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://pennystewartdesigns.com/merrepen/html/pagenavi-css.css" media="screen" />
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/cufon-yui.js"></script>
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/cufon-yankaff.js"></script>
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/jquery-1.4.2.min.js"></script>
<!-- menu -->
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/menusm.js"></script>
<!-- scripts for use -->
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/script.js"></script>
<!-- slider -->
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/coin-slider.min.js"></script>
<!-- tabs-categories -->
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/tabs-hoverintent.js"></script>
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/tabs-superfish.js"></script>
<script type="text/javascript" src="http://pennystewartdesigns.com/merrepen/html/js/tabs.js"></script>
<link rel="stylesheet" href="http://pennystewartdesigns.com/merrepen/html/tabs.css" type="text/css" media="screen" />
</head>
<body>
<div id="page">
<div id="header">
<div class="logo">
<p align="center"><img src="http://pennystewartdesigns.com/merrepen/html/images/logo1.png" align="middle" alt="Merrepen Arts"/>
</p></div>
<div class="topnav">
<ul class="menusm">
<li><a href="http://pennystewartdesigns.com/merrepen/html/main.html">Home</a></li>
<li><a href="http://pennystewartdesigns.com/merrepen/gallery">Gallery</a></li>
<li class="current_page_item"><a href="http://pennystewartdesigns.com/merrepen/html/about.html">About Us</a></li>
<li><a href="http://pennystewartdesigns.com/merrepen/html/dalyriver.html">Daly River</a></li>
<li><a href="www.merrepenfestival.com.au" target="_blank">Festival</a></li>
<li><a href="http://pennystewartdesigns.com/merrepen/html/contact.html">Contact</a></li>
<li><a href="http://pennystewartdesigns.com/merrepen/html/visit.html">Visit Us</a></li>
</ul>
<div class="clr"></div>
</div>
<!--/topnav -->
<div class="clr"></div>
</div>
<!--/header -->
<div class="clr"></div>
</div>
<div id="centercol" style="background-image: url('http://pennystewartdesigns.com/merrepen/html/images/bg/bgabout.gif'); background-repeat:no-repeat; background-position:top right">
<div class="box post">
<div class="content">
<div class="post-title">
</div>
<!--/post-title -->
<div class="blog-content">
<div class="post-excerpt">
<p align="center">
<h3>About Merrepen Arts</h3><br /><br />
</p>
content.<br /><br />
</div>
</div>
<!--/post-excerpt -->
<div class="clr"></div>
<!--/content -->
</div>
<!--/box -->
</div>
</div>
<!--/centercol -->
<div id="rightcol">
<div class="wtitle">
<h3></h3><br />
</div>
<div class="content">
<div id="credit">
<img src="images/about.jpg" alt="Merrepen Arts" />
<!--/content -->
</div>
<!--/box -->
</div>
<!--/content -->
<!--/box -->
</div>
<!--/rightcol -->
<div class="clr"></div>
<!--/columns -->
<div class="clr"></div>
<!--/page -->
<div class="clr"></div>
<div id="page_bottom">
<div id="footer">
<div class="textf">
<div class="text1">© Copyright <a href="http://www.pennystewartdesigns.com">Merrepen Arts</a>. All Rights Reserved.
</div>
<div class="text2"><a href="http://www.pennystewartdesigns.com">Design</a></div>
</div>
</div>
<div class="clr"></div>
<!--/footer -->
</div>
</body>
</html>
my CSS for these divs are he Code: /*=== Layout ===*/
#page { margin:0 auto; padding:0; width:1200px;}
/*=== Center Column ===*/
#centercol { margin-left:20px; padding:0 0 38px; float:left; width:800px;}
/*=== Right Column ===*/
#rightcol { margin:0; padding:0 0 0 40px; float:right; width:400px; border-left:1px solid #dfdfdf; }
.box { margin:0; padding:20px 0;}
.box .content { }
.box_r { margin:0 0 24px; padding:0; background:none; border:none;}
.box_r .content { margin:0; padding:0;}
.small_link { padding:10px 0; margin:0 auto; text-align:center;}
.small_link a { color:#939393; text-decoration:none;}
.small_link small { font-size:11px;}
can anyone help? this is the first time i've had this problem & ive been looking at this code for far too long now. it all looks like gobbledy gook to me now!! arrggghhhhhh. so frustrating! penny I'm sure there is a simple answer to this or I hope so. I don't have much computer code experience so I'm just going with trial and error. Anyway, my question is concerning the output of my navigation links. Its setup like this in template <ul> <li>[Navigation]</li> </ul> this outputs a set of about 10 links that look like this in the code ul> <li> link <br/> link <br/> link <br/> </li> </ul> It works but I need the code to look like this for it to function right. ul> <li> link </li> <li> link </li> <li> link </li> </ul> how do i code that using the [Navigation] Variable thanks a ton I am hoping that someone from this forum might be able to help me. I have a site based off of php and recently installed an add on in the form of a portal page. I have been working with the developer of the portal add on and we are both stumped as to why I am having a specific problem. Here is the portal page: https://www.gunsgrubandgold.com/forum/portal.php If you notice the page renders PERFECT in Fire Fox, however in IE8 the information boxes are all squashed together. If I use this in the overall header Code: <meta http-equiv="X-UA-Compatible" content="IE=edge" /> Then the page renders perfect in IE8 but then I have issues in the text box area when posting of having the cursor scroll up (which I guess is an IE8 issue) If I use this in the overall header Code: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> then the portal page in IE8 is "squashed together" but the text box area for posting works as it should. Could someone please take a look at the portal index page I linked above and let me know why it renders perfect in FF but not IE8??? Most of my members use IE8 from what I can gather and this issue is driving me nuts. Any help appreciated. Thanks!!!! I've tried using the IE developer tool to see what the issue may be but I can't seem to figure out why it is doing what its doing. Thanks again!! I am having a problem with IE7 rendering this page's last two select boxes. It renders fine in Firefox. It doesn't seem to like the height properties of the select boxes being set to percentages. Thanks in advance 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>
<title>BLAH BLAH BLAH, WEIRD IE BEHAVIOUR</title>
</head>
<body id="bodyBODY">
<form name="frmFORM" id="frmFORM">
<table align="center" width="100%" height="800px" border="1">
<tr>
<td style="width: 30%; text-align: center; vertical-align: top; height: 90%;">
<div>
TITLE 1<br />
</div>
<select name="select1" size="2"
id="select1" style="height: 90%; width: 100%;">
<option value="00023">00023</option>
<option value="04988">04988</option>
<option value="05560">05560</option>
<option value="05565">05565</option>
<option value="05915">05915</option>
<option value="05M">05M</option>
<option value="06970">06970</option>
<option value="07M">07M</option>
<option value="09015">09015</option>
<option value="09020">09020</option>
<option value="09030">09030</option>
<option value="09065">09065</option>
<option value="09275">09275</option>
<option value="09330">09330</option>
<option value="09335">09335</option>
<option value="09340">09340</option>
<option value="09441">09441</option>
<option value="09442">09442</option>
<option value="09491">09491</option>
<option value="09615">09615</option>
<option value="09763">09763</option>
<option value="09810">09810</option>
</select>
</td>
<td style="width: 30%; text-align: center; vertical-align: top;">
<div>
TITLE 2<br />
</div>
<select name="select2" id="select2" size="2"
style="height: 90%; width: 100%;">
<option value="09330">09330</option>
<option value="09335">09335</option>
<option value="09340">09340</option>
<option value="09441">09441</option>
<option value="09442">09442</option>
</select>
</td>
<td style="width: 40%; text-align: center; vertical-align: top;">
<div>
TITLE 3<br />
</div>
<select name="select3" id="select3" style="height:90%;width:100%;" size="2">
<option value="A-008FXD">A-008FXD</option>
<option value="A-1251BOLTE">A-1251BOLTE</option>
<option value="A-1251F31">A-1251F31</option>
<option value="A-6901RW7">A-6901RW7</option>
<option value="A-6901RW8">A-6901RW8</option>
<option value="A-6901RW9">A-6901RW9</option>
<option value="A-6901SA1">A-6901SA1</option>
<option value="A-6901SA2">A-6901SA2</option>
<option value="G-813R0070">G-813R0070</option>
<option value="G-813R0127">G-813R0127</option>
<option value="G-813R0174">G-813R0174</option>
<option value="G-813R0192">G-813R0192</option>
<option value="G-813R6500">G-813R6500</option>
<option value="G-813RDJX">G-813RDJX</option>
<option value="G-813RGEL">G-813RGEL</option>
<option value="G-813RICM2">G-813RICM2</option>
<option value="G-813RLIQD">G-813RLIQD</option>
<option value="G-813ROPT">G-813ROPT</option>
<option value="G-813RPCC">G-813RPCC</option>
<option value="G-813RQTM">G-813RQTM</option>
<option value="G-813RTAB">G-813RTAB</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
hello, I'm new on this site. I am making a c# app with web surfing in mind. I asked on 3 c# forums about a question I have but I am not satisfied with their answers. So I came to you too. I want to be able to clean a page(get rid of some tags), that is loading in my webBrowser control, before is rendered inside it. i DON'T want to load it into a string, because if I do that, I must remake the page. I need something that can peek at some page,but not consume it, search for some specific tag, replace/delete it, then allow the "new" page to be finally loaded in my browser. How to achieve this, using html or javascrispt or whatever? I can't explain better than that. Thank you. I am trying to read an HTML file from a file system and render it. What would be the fastest way to read and render such a HTML file? Tried iFrame and setting the inner HTML of a div tag. But both were equally slow. (surprisingly iFrame was better) I've been trying to get a design to work properly under Firefox for several days. Unfortunately because of ip issues I can't post any code. The basic problem is that I tell a table that I it to have height: 100% and it won't do it. Sometimes (not always) the table renders in such a way such that it is less than 100%. <table><tr><td><table class="gimme_some_height_already">...blah blah</table> Here's the annoying part. The problem is intermittent and goes away every time when I hit refresh under Firefox. Why should the page render differently just because I hit refresh? Also, when the table doesn't render properly, the links don't work. I have standard, nothing special <a> links inside the table. When the table is misrendered and I click on a link, instead of transferring to that page, the table just gets bigger! It's as if the table were in a very delicate state, and if someone touched or sneezed on it the whole page would move and rerender. Very strange. None of this happens under IE. I know that many people think that when IE and Firefox disagree that I ought to go with what Firefox says, but really hitting the refresh buttons shouldn't make the page look different. Does anyone know what is going on, and perhaps how I could go about fixing it? I've tried many variations, trial and error combinations and dirty tricks. My website doesn't render correctly in the WebKit browsers (Apple Safari and Google Chrome). It works as expected in Firefox, Internet Explorer versions 6 and above, and Opera. If you click here to view the site, it is the text on the left-hand side underneath the navigation menu that is proving problematic. This text is supposed to appear directly beneath the navigation menu, but when the site is viewed in Safari or Google Chrome, it appears at the very bottom of the page, where the blue background is. I have run the code through the W3C validator and after a bit of alteration, it came back saying there's no errors. What makes it confusing is that I didn't write the code myself and it is mainly table-based (I inherited it from a previous web developer). I am currently working on a brand new layout for the website which will solve the accessibility problem completely, but for the time being we have to continue using the current layout. Does anyone know if there's a quick fix which will get the text on the left-hand side to display correctly in WebKit browsers? This has been bugging me for a while now and I'd really like to get it fixed. Is there anything obvious that I've missed? Thanks in advance for any help. Hi, Firstly, I want to apologise, that this is MySpace related. I am creating quite an advanced profile however. TEST PAGE: www.myspace.com/greeksaladhandles If you look at the comments section in Firefox, it's fine. It is scrolling as it should do, with just a Y-scrollbar. However, if you move to IE, the comments section is not acting as though it's confined to a space at all, there are no scroll bars and the section just overlaps what is below it. I have asked a few people who are more experienced, but nobody can quite work out how to solve the problem. If you can, please reply or PM me on here, or alternatively, email me on ryan AT missionbooking.co.uk. Thanks (P.S. - Does anyone know how to remove the white borders around the pictures in the comments section?) |
|||||||