CSS/HTML Help

rbxslvr · 07-08-2008, 07:31 PM

Hi. I'm working on a layout for my website right now, and discovered that mozilla will not scroll my content. Firefox fits as much as it can onto the visible portion of the page, but doesn't show a scrollbar to view the content at the bottom. IE will allow scrolling. I'm sorry, but I don't have anything hosted right now, I'm using localhost to test my PHP before uploading.

Does anyone know what would cause this?

Here is what it looks like in firefox:

That is full width.... simply without tabs and taskbar. As you can see, the scroll bar is missing.

kobaj · 07-08-2008, 08:07 PM

What are you using to make the site? Whats your html code?

rbxslvr · 07-08-2008, 09:09 PM

Quote:

Originally Posted by kobaj

What are you using to make the site? Whats your html code?

What do you mean? are you asking for a WYSIWYG editor? I did this in HTML... well, actually PHP that controls the HTML.
CSS:

Code:

.roundhead {
	width: 90%;
	background-color: #5C6633;
	color: #fff;
	position: relative;
	top: 30px;
	left: 50%;
	margin-left: -45%;
}
.roundnav {
	width: 20%;
	background-color: #5C6633;
	color: #fff;
	position: relative;
	margin-left: 5%;
	margin-top: 4%;
	float:left;
}
.roundcont {
	width: 68%;
	background-color: #5C6633;
	color: #fff;
	position: fixed;
	margin-left: 26%;
	margin-top: 4%;
}
.contcont {
	width: 100%;
}

.roundhead p {
	margin: 0 10px;
}
.roundnav p {
	margin: 0 10px;
}
.roundcont p {
	margin: 0 10px;
}

.roundtop { 
	background: url(indexstyles/style1/trc.bmp) no-repeat top right; 
}

.roundbottom {
	background: url(indexstyles/style1/brc.bmp) no-repeat top right; 
}
img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

The HTML code that is generated is as follows:

Code:

<html>
 <head>
  <link rel="shortcut icon" href="BWD.ico" >
  <LINK REL=StyleSheet HREF="indexstyles\style1\style.css"
    TYPE="text/css" MEDIA=screen>
   <title>
    BWD
   </title>
 </head>
  <body bgcolor="COCC8F">
  <div class="roundhead">
     <div class="roundtop">
  	 <img src="indexstyles/style1/tlc.bmp" alt="" 
  	 class="corner" 
  	 style="display: none" />
     </div>
<!-------------------------------------Header------------------------------->
  <h1 style="font: 36pt/20pt sanserif, Georgia, serif;color:#E1E6CF;">
   <center>
     BWD
   </center>
  </h1>
<!--End Header-->
  <div class="roundbottom">
  	<img src="indexstyles/style1/blc.bmp" class="corner"
          style="display: none" />
     </div>
 </div>
 <div class="roundnav">
    <div class="roundtop">
 	<img src="indexstyles/style1/tlc.bmp" class="corner"
          style="display: none" />
    </div>
<!-------------------------------------Navigation--------------------------->
    <span style="font: 14pt/20pt sanserif, Georgia, serif;color:#E1E6CF;">
     <ul>
      <li>Home</li>
      <li>Pricing</li>
      <li>Contact</li>
      <li>Repair/Cleanup</li>
     </ul>
    </span>
<!--End Navigation-->
  <div class="roundbottom">
        <img src="indexstyles\style1\blc.bmp" class="corner"
          style="display: none" />
  </div>
 </div>
 <div class="roundcont">
  <div class="roundtop">
        <img src="indexstyles/style1/tlc.bmp" class="corner"
          style="display: none"/>
  </div>
<!-------------------------------------Content------------------------------>
 <p style="font: 14pt/20pt sanserif, Georgia, serif;color:#E1E6CF;">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vitae dui et 
 ante pharetra venenatis. Nulla facilisi. Nunc ut mi sit amet turpis pretium
 consectetuer. Curabitur sapien dolor, pellentesque ut, sodales et, convallis
 eget, arcu. Phasellus venenatis tellus in nisi. Vivamus pretium ultrices
 orci. Sed ligula odio, porta ac, convallis nec, consequat at, leo. Integer
 ultricies rhoncus velit. Fusce at orci in nisi porta semper. Suspendisse
 potenti. Suspendisse pretium varius est. Quisque orci mauris, porta varius,
 faucibus vitae, convallis a, tellus.
 </p>
 </br>
 <p style="font: 14pt/20pt sanserif, Georgia, serif;color:#E1E6CF;">
 Donec mi. Sed ornare accumsan dolor. In convallis nibh ac velit. Aliquam
 eu erat. Phasellus dictum elementum magna. Maecenas a massa. Cras luctus,
 elit sed interdum elementum, neque leo consequat sapien, sed tempus tortor
 orci vitae libero. Nullam et justo. Cras vehicula adipiscing nibh. Donec
 lectus. Cum sociis natoque penatibus et magnis dis parturient montes,
 nascetur ridiculus mus. Aenean egestas laoreet magna. Cras metus tortor,
 convallis sit amet, pellentesque sit amet, pretium et, nulla. Aliquam
 pretium enim nec pede. Quisque iaculis rhoncus dolor. Proin venenatis
 ligula ut libero. Donec eget nunc. Nullam gravida magna et metus.
 Pellentesque vel ipsum.
 </p>
 </br>
 <p style="font: 14pt/20pt sanserif, Georgia, serif;color:#E1E6CF;">
 Nulla facilisi. Ut lobortis. Nunc faucibus. Fusce aliquam congue elit.
 Vestibulum turpis lorem, tempus suscipit, malesuada nec, consequat
 vitae, libero. Maecenas fermentum, lectus sed aliquet cursus, ligula
 quam rutrum mi, quis placerat purus nunc vel metus. Morbi ipsum dolor,
 viverra in, tristique vitae, dignissim quis, nulla. Quisque sollicitudin
 eleifend nibh. Aenean suscipit. In sem ligula, porttitor id, pharetra
 eu, porttitor sed, purus. Duis cursus, arcu at adipiscing mollis, ligula
 augue dignissim felis, eget suscipit turpis ligula ut magna. Vivamus
 eget tellus. In mauris. Donec nec turpis sed metus imperdiet interdum.
 Vestibulum a nibh.
 </p>
 </br>
 <p style="font: 14pt/20pt sanserif, Georgia, serif;color:#E1E6CF;"> 
 Aliquam pede metus, vehicula at, malesuada elementum, tincidunt in,
 neque. Donec nec tellus. Vivamus massa. Nulla consectetuer dui luctus
 turpis. Quisque sit amet ante non leo tempor aliquam. Suspendisse
 congue pellentesque purus. Donec vitae urna. Morbi sit amet nunc at
 tortor consequat gravida. Sed est diam, venenatis et, dictum sed,
 facilisis nec, mauris. In hac habitasse platea dictumst. In sed lorem
 ultricies justo elementum mattis. Phasellus cursus.
 </p>
 </br>
 <p style="font: 14pt/20pt sanserif, Georgia, serif;color:#E1E6CF;">
 Nunc enim. Donec volutpat ultrices sapien. In sodales. Maecenas enim.
 Morbi pulvinar libero vel sapien. Proin ut odio. Pellentesque habitant
 morbi tristique senectus et netus et malesuada fames ac turpis egestas.
 Suspendisse turpis sapien, ornare id, blandit sed, rutrum id, nisi.
 Sed augue purus, laoreet sed, dapibus ut, egestas id, pede. Vivamus
 est urna, suscipit nec, bibendum eu, vestibulum vel, augue. Etiam
 aliquam, magna eu bibendum sagittis, odio pede sagittis est, sed
 tempus felis erat et enim. Integer eu lorem quis ante aliquet
 condimentum. Ut cursus, odio non euismod elementum, nulla felis rhoncus
 ipsum, vitae ornare lorem arcu vel nulla. Vestibulum lobortis nulla sit
 amet nisi. 
 </p>
<!--End Content-->
  <div class="roundbottom">
    <img src="indexstyles\style1\blc.bmp" class="corner"
      style="display: none"/>
  </div>
 </div>
 </body>
</html>

By the way, I don't know if I had the problem or not before I started using the php.... I created the layout in HTML originally, but threw it into some PHP so that I could more easily populate the different DIVs. Now, for each page, I have a set of ~4 variables to fill in... (Title, Head, Navigation, Content).

Okay, I've made the code look a little nicer... better hierarchical tag layout. Not perfect, but better than lines 1000's of characters long. At least I eliminated horizontal scrolling of the code.

kobaj · 07-08-2008, 10:18 PM

Quote:

Originally Posted by rbxslvr

What do you mean? are you asking for a WYSIWYG editor? I did this in HTML... well, actually PHP that controls the HTML.
CSS:

Code:

.roundhead {
	width: 90%;
	background-color: #5C6633;
	color: #fff;
	position: relative;
	top: 30px;
	left: 50%;
	margin-left: -45%;
}
.roundnav {
	width: 20%;
	background-color: #5C6633;
	color: #fff;
	position: relative;
	margin-left: 5%;
	margin-top: 4%;
	float:left;
}
.roundcont {
	width: 68%;
	background-color: #5C6633;
	color: #fff;
	position: fixed;
	margin-left: 26%;
	margin-top: 4%;
}
.contcont {
	width: 100%;
}

.roundhead p {
	margin: 0 10px;
}
.roundnav p {
	margin: 0 10px;
}
.roundcont p {
	margin: 0 10px;
}

.roundtop { 
	background: url(indexstyles/style1/trc.bmp) no-repeat top right; 
}

.roundbottom {
	background: url(indexstyles/style1/brc.bmp) no-repeat top right; 
}
img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

By the way, I don't know if I had the problem or not before I started using the php.... I created the layout in HTML originally, but threw it into some PHP so that I could more easily populate the different DIVs. Now, for each page, I have a set of ~4 variables to fill in... (Title, Head, Navigation, Content).

Okay, I've made the code look a little nicer... better hierarchical tag layout. Not perfect, but better than lines 1000's of characters long. At least I eliminated horizontal scrolling of the code.

Yeah, I was seeing if you were using a WYSIWYG, and if so, I wouldnt have helped

.

But this is relatively easy fix, your CSS just needs changed a little...

Code:

.roundhead {
	width: 90%;
	background-color: #5C6633;
	color: #fff;
	position: relative;
	top: 30px;
	left: 50%;
	margin-left: -45%;
}
.roundnav {
	width: 20%;
	background-color: #5C6633;
	color: #fff;
	position: relative;
	margin-left: 5%;
	margin-top: 4%;
	float:left;
}
.roundcont {
	width: 68%;
	background-color: #5C6633;
	color: #fff;
	position: relative;
	margin-left: 26%;
	margin-top: 4%;
}
.contcont {
	width: 100%;
}

.roundhead p {
	margin: 0 10px;
}
.roundnav p {
	margin: 0 10px;
}
.roundcont p {
	margin: 0 10px;
}

.roundtop { 
	background: url(indexstyles/style1/trc.bmp) no-repeat top right; 
}

.roundbottom {
	background: url(indexstyles/style1/brc.bmp) no-repeat top right; 
}
img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

rbxslvr · 07-08-2008, 10:36 PM

Quote:

Originally Posted by kobaj

Yeah, I was seeing if you were using a WYSIWYG, and if so, I wouldnt have helped

.

But this is relatively easy fix, your CSS just needs changed a little...

Code:

.roundhead {
	width: 90%;
	background-color: #5C6633;
	color: #fff;
	position: relative;
	top: 30px;
	left: 50%;
	margin-left: -45%;
}
.roundnav {
	width: 20%;
	background-color: #5C6633;
	color: #fff;
	position: relative;
	margin-left: 5%;
	margin-top: 4%;
	float:left;
}
.roundcont {
	width: 68%;
	background-color: #5C6633;
	color: #fff;
	position: relative;
	margin-left: 26%;
	margin-top: 4%;
}
.contcont {
	width: 100%;
}

.roundhead p {
	margin: 0 10px;
}
.roundnav p {
	margin: 0 10px;
}
.roundcont p {
	margin: 0 10px;
}

.roundtop { 
	background: url(indexstyles/style1/trc.bmp) no-repeat top right; 
}

.roundbottom {
	background: url(indexstyles/style1/brc.bmp) no-repeat top right; 
}
img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

Perfect! Thanks so much.... I don't know how I could have missed that.

rbxslvr · 07-09-2008, 07:00 PM

With the same code (fixed code), what is the issue with IE/Safari? I know that CSS is picky from browser to browser.... The formatting looks totally different in IE/Safari than it does with Firefox, and corners are missing (the ones using "background: url(indexstyles/style1/trc.bmp) no-repeat top right;"... as well as the ones for "brc.bmp")

To understand what I'm talking about, try opening it with firefox, and IE/Safari and look at the difference.

Thanks for the help so far.

kobaj · 07-09-2008, 08:02 PM

Thats the problem with HTML and CSS, every browser loads it differently and you have to come up with different ways of dealing with it.

The only thing I see wrong with the website (it may be because I dont have the images you are talking about...) but the widths are a little messed up.

But is an easy fix, This bit of code is only seen by IE, firefox and other browsers will load completely as if it were not there at all!

Code:

<!-------------------------------------Navigation--------------------------->
    <span style="font: 14pt/20pt sanserif, Georgia, serif;color:#E1E6CF;">
     <ul>
      <li>Home</li>
      <li>Pricing</li>
      <li>Contact</li>
      <li>Repair/Cleanup</li>
     </ul>
    </span>
<!--End Navigation-->
  <div class="roundbottom">
        <img src="indexstyles\style1\blc.bmp" class="corner"
          style="display: none" />
  </div>
 </div>
 <div class="roundcont">
<!--[if IE]>
<div style="width: 135%;">
<![endif]-->
  <div class="roundtop">
        <img src="indexstyles/style1/tlc.bmp" class="corner"
          style="display: none"/>
  </div>
<!-------------------------------------Content------------------------------>

Code:

 </p>
<!--End Content-->
  <div class="roundbottom">
    <img src="indexstyles\style1\blc.bmp" class="corner"
      style="display: none"/>
  </div>
<!--[if IE]>
</div>
<![endif]-->
 </div>
 </body>
</html>

Producing this in IE, yet Firefox loads as normal as ever!

Play around with the "if ie" statements and see if you cant use it to fix the "image" problem, and location/size of the "menu". Hope this helped

.

rbxslvr · 07-09-2008, 08:50 PM

Does this code work for Firefox/Safari as well? Is there a way I can combine two?

For example...

Code:

<!--[if Safari]>
<div style="width: 135%;">
<![endif]-->

or

Code:

<!--[if IE or Safari]>
<div style="width: 135%;">
<![endif]-->

Perhaps a form of the not operator as well?

Code:

<!--[if !Firefox]>
<div style="width: 135%;">
<![endif]-->

I'm curious because Safari and IE look about the same... I'm assuming that whatever will fix IE will also fix safari... perhaps Firefox is the only one in which it works right now (out of ALL internet browsers)... in that case, it would be better to use a form of not, to determine whether or not Firefox is being used.

I guess I could simply include another page style (In my php, I added a variable "Style", which if not set produces a value of 1. That sends my title, head, and content to "style1constructor.php", which puts together each page using the provided variables. I might add a style two specifically for IE, and some kind of function to determine what browser is being used. If IE is being used, style2 would be the default style.

kobaj · 07-09-2008, 10:26 PM

As far as I know, there isnt a "if firefox", you could try googling it. Your php idea might work better in the long run if you have multiple pages that all read from the same CSS file.

07-08-2008, 07:31 PM	#1 (permalink)
rbxslvr Silver Member Join Date: Jun 2007 Location: Indiana Age: 15 Posts: 239	CSS/HTML Help Hi. I'm working on a layout for my website right now, and discovered that mozilla will not scroll my content. Firefox fits as much as it can onto the visible portion of the page, but doesn't show a scrollbar to view the content at the bottom. IE will allow scrolling. I'm sorry, but I don't have anything hosted right now, I'm using localhost to test my PHP before uploading. Does anyone know what would cause this? Here is what it looks like in firefox: That is full width.... simply without tabs and taskbar. As you can see, the scroll bar is missing. __________________ "When the doors of perception are cleansed, things will appear to man as the really are, infinite."

07-08-2008, 08:07 PM	#2 (permalink)
kobaj Diamond Member Join Date: Jan 2005 Posts: 2,219	What are you using to make the site? Whats your html code? __________________ My site My sigThanks Kornowski for ava and sig. Winner of photo competition: Bokeh.

07-09-2008, 07:00 PM	#6 (permalink)
rbxslvr Silver Member Join Date: Jun 2007 Location: Indiana Age: 15 Posts: 239	With the same code (fixed code), what is the issue with IE/Safari? I know that CSS is picky from browser to browser.... The formatting looks totally different in IE/Safari than it does with Firefox, and corners are missing (the ones using "background: url(indexstyles/style1/trc.bmp) no-repeat top right;"... as well as the ones for "brc.bmp") To understand what I'm talking about, try opening it with firefox, and IE/Safari and look at the difference. Thanks for the help so far. __________________ "When the doors of perception are cleansed, things will appear to man as the really are, infinite."

07-09-2008, 08:02 PM	#7 (permalink)
kobaj Diamond Member Join Date: Jan 2005 Posts: 2,219	Thats the problem with HTML and CSS, every browser loads it differently and you have to come up with different ways of dealing with it. The only thing I see wrong with the website (it may be because I dont have the images you are talking about...) but the widths are a little messed up. But is an easy fix, This bit of code is only seen by IE, firefox and other browsers will load completely as if it were not there at all! Code: <!-------------------------------------Navigation---------------------------> <span style="font: 14pt/20pt sanserif, Georgia, serif;color:#E1E6CF;"> <ul> <li>Home</li> <li>Pricing</li> <li>Contact</li> <li>Repair/Cleanup</li> </ul> </span> <!--End Navigation--> <div class="roundbottom"> <img src="indexstyles\style1\blc.bmp" class="corner" style="display: none" /> </div> </div> <div class="roundcont"> <!--[if IE]> <div style="width: 135%;"> <![endif]--> <div class="roundtop"> <img src="indexstyles/style1/tlc.bmp" class="corner" style="display: none"/> </div> <!-------------------------------------Content------------------------------> Code: </p> <!--End Content--> <div class="roundbottom"> <img src="indexstyles\style1\blc.bmp" class="corner" style="display: none"/> </div> <!--[if IE]> </div> <![endif]--> </div> </body> </html> Producing this in IE, yet Firefox loads as normal as ever! Play around with the "if ie" statements and see if you cant use it to fix the "image" problem, and location/size of the "menu". Hope this helped . __________________ My site My sigThanks Kornowski for ava and sig. Winner of photo competition: Bokeh.

07-09-2008, 08:50 PM	#8 (permalink)
rbxslvr Silver Member Join Date: Jun 2007 Location: Indiana Age: 15 Posts: 239	Does this code work for Firefox/Safari as well? Is there a way I can combine two? For example... Code: <!--[if Safari]> <div style="width: 135%;"> <![endif]--> or Code: <!--[if IE or Safari]> <div style="width: 135%;"> <![endif]--> Perhaps a form of the not operator as well? Code: <!--[if !Firefox]> <div style="width: 135%;"> <![endif]--> I'm curious because Safari and IE look about the same... I'm assuming that whatever will fix IE will also fix safari... perhaps Firefox is the only one in which it works right now (out of ALL internet browsers)... in that case, it would be better to use a form of not, to determine whether or not Firefox is being used. I guess I could simply include another page style (In my php, I added a variable "Style", which if not set produces a value of 1. That sends my title, head, and content to "style1constructor.php", which puts together each page using the provided variables. I might add a style two specifically for IE, and some kind of function to determine what browser is being used. If IE is being used, style2 would be the default style. __________________ "When the doors of perception are cleansed, things will appear to man as the really are, infinite."

07-09-2008, 10:26 PM	#9 (permalink)
kobaj Diamond Member Join Date: Jan 2005 Posts: 2,219	As far as I know, there isnt a "if firefox", you could try googling it. Your php idea might work better in the long run if you have multiple pages that all read from the same CSS file. __________________ My site My sigThanks Kornowski for ava and sig. Winner of photo competition: Bokeh.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode