CSS - Initial Page Load Problems In Mozilla

I have done alot of changing around settings, sizing from absolute to relative, margins to widths, and i still cant figure out what is urking my page when loaded from mozilla-firefox and netscape. The page works fine when used with Internet Explorer.

Does anyone have a chance to take a look at it here at
<a href>
www.wolfdogg.soldierlink.com/html
using Firefox and IE?

style sheet is at
<a href> http://www.wolfdogg.soldierlink.com/main-reworked.css

or would you prefer i post the code

is there actually a website that i can go to that will have a list of the extra styles that firefox and netscape needs that are automatic and uneccesary on internet explorer?

Thanks a bunch, WolfDogg

If you display: none an image, will it load in the page?

That goes for any content, really... will it not load until you display: block it via javascript?

I have a div that uses overflow:scroll to allow a large amount of text to fit into a small space.

Is there a way to make it so that when this div is loaded, it will scroll to the bottom of its contents instead of starting at the top by default?

Thanks for any help.

I have footerStickAlt design for my page. Been trying to implement a new page with a big div (gonna be flash video) but it's causing the footer to bounce from bottom of page to middle of page where the big div seems to be ignored. The thing that is really aggrivating is that if you load ctrl-refresh page again, it goes back to bottom, then ctrl-refresh load page again it pops up to wrong spot. Inconsistent like that. Do it 20 times and it pops up like half the time? But it gets stranger. When the footer pops up (those page loads when IE7 is ignoring the big div height) just adjusting the size of window causes the footer to go back to bottom where it belongs. This type of buggy inconsistent behavior is not occurring in Firefox. It's really aggravating me.

I've seen this before on my main index page where I used to have a div (an advertisement) which was also confusing the IE7 just as it is now. So I removed that div on index page to evade the issue. But I want to get to root cause now and fix the situation. I'm not well versed in CSS, especially not the strange bugs like this that only occur on IE7 and only on first page load. Seems it's something to do with IE7 not interpreting the page at load, but it understands when I modify the window size it fixes itself.

Please assist o smart computer gods!

I have an input box with CSS positioning on it that only breaks in IE7. The input box is contained in a div that lives inside a <td>.

when the pages loads, the input box is out of position. When I click on a checkbox, it immediately slides into the correct position.

The strange thing is, the checkbox makes an onclick call to a function that contains JQuery dealing with disabling and enabling the field. No positioning or css is manipulated in that function.

It almost seems like the position of that input box is not loading when the DOM loads. However, with that in mind, I used the developer tools for IE7 (the only browser it messes up in) and noticed when the page loads it has the correct values in the CSS style. When I click the checkbox and the input box moves, the values never change. The page doesn't recognize the input box is in the wrong location.
Please help!!!!!

I am including my CSS below:
form div input.fileUploadbox_overlay_FuelSurcharge
{
position: relative !important;
width: 209px !important;
margin: 0 55px 0 -288px !important;
}

I've started using a JavaScript carousel script on my website, http://www.rockitdesign.co.uk/new/. When I loaded the page in Firefox and safari every image in the carousel would appear and then all but the top would disappear which is how it should be.

Sorry for the bad explanation, any way to stop this?

I've tried a few combinations of position properties for this and can't figure out how to do it, or whether it is possible.

What I want to do is put an image inside a div which has a property of 'overflow:auto'. I want the image to be positioned so a particlar point is inside the visible area, but so the user can still scroll around to see the whole of the image.

Could somebody point me in the right direction please?

Hi all, I have a fairly complex page with quite a few nested divs, and some of these nested divs have overflow:auto assigned to them.

The problem Im having is that on pageload and when I click a link that has uses javascript to switch the visibility of some of the sub elements, it flickers the div to a different part of the page.

I know the description isnt much help, but I didnt know if this was something that others had ran into in general with gecko browsers.
I've tried assigning overflow: auto to the containing divs, and to no avail.

Anyone have any general ideas as to what it could be?

Thanks in advance

Here is the page

Things that I am having problem with:
1) I want 10px more space on the left side so it aligns on the left with the rest of the text (like h3 does).

2) On-line Customer Support Form and On-line Technical Support Form links are not aligning left with the rest of the <p> I have tried changing things to fix this with no luck.

3) How can a get a block of text to be on the right side of the Technical support block of text - sort of like a column??

The only thing I can think of is creating a layer, but I don't know if that makes good design sense - so is there another better way??

Here is my css code:
Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

h1 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

h2 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 14px;
	font-weight: bold;
}

h3 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

pre {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*customer support*/

#csupport {
	padding: 10px auto auto auto;
	text-align: left;
}

#csupport h1, h2, h3{
	color: #000099;
	font-weight: bold;
}

#csupport h2 {
	margin-left: 20px;
}

#csupport h3 {
	display: inline;
	margin-left: 20px;
}

#csupport img {
	margin-right: 20px;
	float: right;
	clear: none;
}

#csupport ul {
	list-style: none;
	padding: 0px 0px 0px 20px;
	margin-left: 20px;
}
	
#csupport li {
	margin-left: 10px;
	display: inline;
}

#csupport a:link, #csupport a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#csupport a:hover, #csupport a:active {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

.contact {
	margin-left: 195px;
	margin-right: 20px;
}

.contact a:link, .contact a:visited {
	margin-left: 195px;
}

.contact a:hover, .contact a:active {
	margin-left: 195px;
}

Here is my xhtml code:
Code:

	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="../products/spirometers.html">Spirometers</a></li>
		<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="../products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
        <li><a href="customer_support.html">Customer Support</a></li>
	  <li><a href="training_services.html">Training & Services</a></li>
      <li><a href="exhibitions.html">Exhibitions</a></li>
      <li><a href="newsletters.html">Newsletters</a></li>
      <li><a href="downloads.html">Downloads</a></li>
      <li><a href="useful_links.html">Useful Links</a></li>
      <li><a href="industry_information.html">Industry Information</a></li>
	  <li><a href="industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
    <div id="mainColumn"> <!-- InstanceBeginEditable name="Main_Section" -->
	<div id="csupport">
	  
	  	<h1>Vitalograph Customer Support</h1>
			
           <p class="contact">Our trained customer support staff is available for telephone support 
          on sales advice, technical queries or information requests. A team of 
          field based sales and training advisors are also on hand to provide 
          spirometry training or product demonstrations.</p>
			
		<img src="/images/uk_customer_support.jpg" width="233" height="190" alt="Customer Support Staff" /> 
        <h2>Contact Us</h2>
			
			<p class="contact">
			Vitalograph Ltd<br />
			Maids Morton, Buckingham<br />
			MK18 1SW<br />
			England<br />
			</p>
			
			<p class="contact"><h3>Phone:</h3> +44(0) 1280 827110<br />
			<h3>Fax</h3>: +44(0) 1280 823302<br />
			</p>
				
			<p class="contact"><h3>Email: </h3> <a href="mailto:sales@vitalograph.co.uk">sales@vitalograph.co.uk </a><br />
		    <a href="/enquiry_forms/customer_support_form.html">On-Line Customer Support Form</a></p>
			
			<ul>
				
          <li><a href="http://www.vitalograph.ie/domains1c922.html">Ireland</a></li>
				
          <li><a href="http://www.vitalograph.de/unternehmen/kontakt.html">Germany</a></li>
				
          <li><a href="http://www.vitalograph.com/site_files/contact.html">USA/Canada</a></li>
				
          <li><a href="http://www.vitalograph.co.uk/contact_international.html">Other</a></li>
			</ul>
          			
			<h2>Technical Support</h2>
			
				<p class="contact">
			Vitalograph Ltd<br />
			Maids Morton, Buckingham<br />
			MK18 1SW<br />
			England<br />
			</p>
			
			<p class="contact"><h3>Phone:</h3> +44(0) 1280 827110<br />
			<h3>Fax</h3>: +44(0) 1280 823302<br />
			</p>
				
			<p class="contact"><h3>Email: </h3> <a href="mailto:techsupport@vitalograph.co.uk">techsupport@vitalograph.co.uk </a><br />
		    <a href="/enquiry_forms/technical_support_form.html">On-Line Technical Support Form</a></p>
			
			<ul>
				
          	<li><a href="http://www.vitalograph.ie/domains1c922.html">Ireland</a></li>
				
          	<li><a href="http://www.vitalograph.de/unternehmen/kontakt.html">Germany</a></li>
				
          	<li><a href="http://www.vitalograph.com/site_files/contact.html">USA/Canada</a></li>
				
          	<li><a href="http://www.vitalograph.co.uk/contact_international.html">Other</a></li>
			</ul>
			
	  </div>
	
	<!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

I truely hate IE!

Firefox renders all my coding correctly and makes the website look great!! However, when I try to view it in IE, something always goes wrong. There is only one problem with firefox which I shall highlight below

IE 7.0+ = The footer is NOT being placed at the bottom NOR is it being capped at 1000 pixels. It is going 100% across the full screen. The footer displays at the center of the screen rather than the bottom!

IE 4.0 - 6+ = Everything goes wrong here. The header displays the red all the way down the left column and right column . The background color of the .png is no longer transparent. The footer displays 100% rather than capped at the 1000px and the main top navigation does not react as fast as it should because there is an error somewhere. The top navigation adds additional padding and doesn't load the hoover button as fast!

Firefox = The footer doesn't display 1000px and it does not follow the format of the main top navigation which it is meant to, however, it goes 100% across the enter browser.

The domain link is: www.gc69.com

Can anyone PLEASE help me with these CSS errors and provide me with ANY solutions that may help my delicate situtation ASAP!!!

Problem page: http://www.ilumos.co.uk/site/?page=events
Working page: http://www.ilumos.co.uk/site/
Style: http://www.ilumos.co.uk/site/style/styleDefault.css
Hi all,

I'm trying to make the glowyness (inside div#wrap) on the right side of the page extend to the bottom of the viewport/window, even if there isnt enough content (see problem page above) but the trouble is that when I apply height: 100% (with the same in a parent element) IE refuses to scroll the longer pages.

Is there anoter way to make div#wrap fill the window?

Thanks

I have my site centred in the browser window, yet if you resize the window (as if emulating 800 x 600 or smaller) then the scroll bar appears on the right as it should.

But the web page has the top section cut off and is not accessible, is this my code? or is this because of the size of the web site?

The page can be viewed he

http://www.spanishguitar.co.uk

If you make your height of your browser window smaller, you will see that the top of the site gets cut off. How can I fix this?

My css for this is:
Code:

#PageDiv {
	position:absolute;
	left: 50%; 
	top: 50%;
	width: 770px;
	height: 600px;
	margin-top: -300px; /* half of the height */
	margin-left: -385px; /* half of the width */
	border: 1px solid #000;
}

I have a simple page layout using div's and CSS, but the alignment becomes screwed up when printing the page. My CSS for the layout is:

#OneColumn {
width:575px;
background:#fff;
}

#LeftColumn {
float:left;
width:458px;
background:#fff;
padding-top: 15px;

}

#RightColumn {

float: right;
width:113px;
background:#fff;
text-align:center;
padding-top: 38px;
font-family: Arial;
font-size: 10px;
color: #000;
}

My code is formatted in the same order so, on the actual page OneColumn is on top of the left and right columns. If the page is short (less than on page) it prints and looks fine in print preview.

Problem 1: In IE 6
If the page is longer than one page when printed the information that is in OneColumn is on the first page of the printout and the rest of the information (from the left and right column) is on the next pages.

Problem 2: In IE 6 and Mozilla Firefox 0.8
Also, the right column is used to display thumbnail-pics that correlate to the text in the left column. At times I used styles to space the pictures. Here is one of them:

.spacePic {
margin-top: 95px
}

This works fine except for when printing the images, they generally are printed lower than they apprear on the screen.

Any suggestions or tips would be appreciated. Thanks for your help!

Casey

I used this method because it seems like the most accessible and search-engine friendly. I run into a problem in IE6 and IE7 where the cursor does not turn into a pointer when the mouse is hovered over the image.

HTML:
Code:

<h1 class="header">
    <a href="#"><span></span>Header Text</a>
</h1>

CSS:
Code:

#header h1.header{
	width:163px;
	height:37px;
	float:left;
	position:relative;
}
#header h1.header a{
	float:left;
	display:block;
	width:163px;
	height:37px;
}
#header h1.header span{
	background: url(../images/common/logo.gif) no-repeat;
	position: absolute;
	width: 163px;
	height: 37px;
}

I feel like there is one style declaration I'm missing, but I cannot figure it out.

I don't mind telling yall, I'm a bit hesitant to post here, only because I'm very new to html and css, just learning. Folks here are far above my ability, I've got many of the pages on site bookmarked for reference.

I'm taking this plunge because I'm ready to rip hairs one by one on a problem.

I have a friend who originally made a site in a builder program *shudders* and he has asked me to convert it to more conventional pages (he's determined to keep this theme and I'm not good enough to remake the entire site by hand yet). This program created every thing on the pages as a Div with css styling embedded in the document.

Ive got everything working perfectly except that I can not for the life of me get the Div.banner to stretch the width of pages in order for it to span the width of any resolution.
What I'm trying to do is simply (or should be) make a 93px by 3 or 4 px bar repeat the length of the div. Here is the code its using at this time.

Code:

<STYLE TYPE="text/css">
DIV.banner { position:absolute; top:0px; left:0px; z-index:0; }
....</STYLE>

<DIV class="banner"><IMG SRC="images/vbar.PNG"  WIDTH=900 HEIGHT=93 BORDER=0></DIV>

The above works but its a fixed width and I would like it to be full width no matter what resolution ones using.

I have tried making the Div class="banner" use a width=100%.
This causes the image to be shown at top=0 and left=0 once only. I tried adding background-repeat repeat-x to the css code. Any other changes I make like removing the Width from the Div class all together causes it to just go away.

I've been able to manipulate everything else from this horrible theme fine except this. I'm sure there is something simple I'm missing and if you need to see more of the index page code just let me know (its not online at this time). I didn't want to put in too much stuff and being such a n00b at all this, I'm learning so be gentle with me..

Thanks in Advance
Me