Jump to content

myownslave

Members
 View Profile  See their activity

  • Posts

    9

  • Joined

  • Last visited

myownslave's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. myownslave
    Already have the BODY height at 100%The % works fine in IE, but Mozilla just ignores the value and sets the height to fit the content. I need a set value for the height, default value won't work.Here's my code:<?XML version="1.0" encoding="UTF-8"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/XHTML11/DTD/XHTML11.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><HEAD><META http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/><TITLE>THE FENIANS GAA CLUB - News</TITLE><META name="Author" content="Jim Broderick"/><STYLE type="text/css"> BODY { margin:15px 0px; border:0; padding:0px; width:100%; height:100%; max-height:100%; background:#000099; text-align:center; font-family:arial, verdana, sans-serif; font-size:0.8em; overflow:auto; } #HEADER { top:0px; left:0px; right:0px; width:100%; margin-top:0px; margin-bottom:15px; height:90px; overflow:hidden; background:#FFFFFF; } #MENU { padding:0px; top:0px; margin:0px auto; margin-bottom:15px; height:25px; width:764px; overflow:hidden; background:#000099; text-align:center; } #CONTENT { top:0px; margin:0px auto; width:764px; height:74%; padding:15px; background:#FFFFFF; text-align:left; text-indent:40px; overflow:auto; } </STYLE></HEAD><BODY><FONT color="#000000" face=Verdana><DIV id="HEADER">Page Header</DIV><DIV id="MENU">Horizontal Menu</DIV><DIV id="CONTENT">Content Area</P></DIV></FONT></BODY></HTML>
  2. myownslave
    height:40%; IE will display the div correctly - 40% of the height of the browser window. But Mozilla doesn't seem to recognise a % value and just sets the height of the div to automatically fit the amount of text in it. If I set the height:40px; then Mozilla will recognise this alright and will set the height of the div to 40 pixels.This only happens when using relative positioning - using absolute positioning, Mozilla does seem to recognise height:40%;
  3. myownslave
    Cheers, I'll take a look at your code and see what I can do. Just a question - what do float:right; and clear:right; do? By any chance do they just position the div in a certain way in it's container div? Cos if so, then this might help me with another problem I'm having...
  4. myownslave
    Well that's the problem - I'm wondering if there is any way of programming it so that it will fit the window size regardless of the screen resolution. I have no way of knowing what resolution the end user will have, and I want to be able to accommodate all screen resolutions.And height:100%; will not work because I have three other style sheets in the same window, and I have the size for each of those set in pixels rather than in percent.
  5. myownslave
    I have 4 stlye sheets, one underneath the other. The bottom (CONTENT) one is the main content area, and I want so set the height of this style sheet so that it just automatically comes down to fit the remainder of the page. Basically, regardless of the window size or screen resolution, I want the bottom edge of that style sheet to touch the bottom of the window, no higher, no lower. Below is my code, any idea how I could change it to get what I'm after?<?XML version="1.0" encoding="UTF-8"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/XHTML11/DTD/XHTML11.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><HEAD><META http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/><TITLE>THE FENIANS GAA CLUB - News</TITLE><META name="Author" content="Jim Broderick"/><STYLE type="text/css"> BODY { margin:15px 0px; border:0; padding:0px; width:100%; height:100%; max-height:100%; background:#000099; text-align:center; font-family:arial, verdana, sans-serif; font-size:0.8em; overflow:hidden; } #HEADER { top:0px; left:0px; right:0px; width:100%; margin-top:0px; margin-bottom:15px; height:90px; overflow:hidden; background:#FFFFFF; } #MENU { padding:0px 15px; top:0px; margin:0px auto; margin-bottom:15px; height:25px; width:764px; overflow:hidden; background:#000000; text-align:center; } #CONTENTHEADER { top:0px; margin:0px auto; width:764px; height:40px; padding:15px; overflow:hidden; background:#FFFFFF; text-align:center; } #CONTENT { top:0px; margin:0px auto; width:764px; height:40%; padding:15px; background:#FFFFFF; text-align:left; text-indent:40px; overflow:auto; } </STYLE></HEAD><BODY><FONT color="#000000" face=Verdana><DIV id="HEADER">Here's where the header/branding image will be...</DIV><DIV id="MENU">This will be where the menu resides...</DIV><DIV id="CONTENTHEADER">This is just another text area that acts as an intro to the main content area...</DIV><DIV id="CONTENT">This is the main content area<BR>I want the bottom edge of this style sheet to touch automatically come down to touch the bottom of the browser window. How could I set the height so that this will happen?</DIV></FONT></BODY></HTML>
  6. myownslave
    It seems that the only way I can get scrollbars in Netscape or in Mozilla is to set overflow:auto; in the BODY. But I don't want a scrollbar in the body, I want it in the specific style sheets instead. Setting overflow:hidden; in BODY and overflow;auto; in those specific style sheets solves the problem in IE, but in Netscape and Mozilla, that just results in no scrollbars appearing whatsoever!The root cause of the problem might be that Mozilla and Netscape don't seem to pay any attention to the height I've set the style sheets to - they just automatically set the style sheet to fit it's content, and hence don't see the need for a scrollbar. Here's a sample of my code: BODY { margin:15px 0px; border:0; padding:0px; width:100%; height:100%; max-height:100%; background:#000099; text-align:center; font-family:arial, verdana, sans-serif; font-size:0.8em; overflow:hidden; } #CONTENT { top:0px; margin:0px auto; width:764px; height:40%; padding:15px; background:#FFFFFF; text-align:left; text-indent:40px; overflow:auto; } Even though the height is set to 40%, Mozilla and Netscape ignore this and just set the height to fit the content. At the very start of the code, I have the following:<?XML version="1.0" encoding="UTF-8"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/XHTML11/DTD/XHTML11.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><HEAD><META http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/><TITLE>THE FENIANS GAA CLUB - News</TITLE><META name="Author" content="Jim Broderick"/>Do I need anything else to make it fully-compatible with Netscape/Mozilla?Cheers,Jim
  7. myownslave
    Just to clarify, it is centre-aligning as far as left to right is concerned, not as far as up and down is concerned. Not sure whether you'd call that vertical alignment or horizontal alignment, but I'm sure you get the idea!
  8. myownslave
    I'm new to CSS so not completely up to date with classes and the like. Just looking to use the simple command in each style sheet for the moment. Only realising now that it's horizontal centering that I'm looking for and not vertical!Anyway, I tried both horizontal-align: middle; (although not even sure if this is a valid command)and vertical-align: middle;but neither seemed to work - here is an example of my code: #CONTENT { position:absolute; vertical-align: middle; horizontal-align: middle; height:100%; width:750px; padding:20px; overflow:auto; background:#FFFFFF; } but even still, the style sheet is located in the top-left of the screen, even when I use position:relative;Jim
  9. myownslave
    Hi,I want to be able to fit my full page into the smallest screen resolution (800x600), but then when being used on a higher resolution, I want it to centre-align instead of aligning from the left, which leaves a big gaping hole on the right-hand side of the screen. So is there any way of aligning a style sheet to the centre? The code I'm using at the moment is something like: #CONTENT { position:absolute; top:200px; left:0px; right:0px; bottom:0px; height:65%; width:800px; padding:20px; overflow:auto; background:#FFFFFF; } Thanks in advance,Jim
×
×
  • Create New...