SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gecko gurus...I need ur help!

    Here's the page
    http://www.lanwizards.com/newlwiz.php

    Viewing this in IE6 it looks as I have predicted. In NS6 things get a "bit" scrunched together

    And here are the styles to be concerned with
    Code:
    /****************** Style for data forms ****************************/
    form.dataForm {
    	width: 500px;
    	margin-left: 30px;
    	}
    div.formHeader {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	background-color: #999;
    	color: #FFFFFF;
    	font-size: 15px;
    	font-weight: bold;
    	padding: 3px;
    	border: 1px solid black;
    	text-align: center;	
    	}
    div.formBody {
    	background-color: #FFF;
    	border: 1px solid black;
    	width: 100%;
    	margin: 5px 0px;
    	text-align: center;
    	}
    span.formLabel {
    	font-family: Verdana, sans-serif;
    	font-size: 10px;
    	font-weight: bold;
    	width: 34%;
    	padding: 6px 3px 3px 3px;
    	text-align: right;
    	vertical-align: top;	
    	}
    span.formLabel em {
    	font-weight: normal;
    	}
    span.formObj {
    	font-family: Verdana, sans-serif;
    	font-size: 10px;
    	width: 64%;
    	padding: 3px;
    	text-align: left;
    	vertical-align: top;	
    	}
    span.col {
    	width:49%;
    	vertical-align: top;
    	}	
    div.formFooter {
    	background-color: #999;
    	padding: 3px;	
    	border: 1px solid #000;
    	text-align: center;	
    	}
    div.formFooter input {
    	font-family: Verdana, sans-serif;
    	border: 2px #777 outset;
    	background-color: #FFF;
    	color: #000;
    	}
    div.hr {
    	width: 100%;
    	height: 1px;
    	border-top: 1px solid #000;
    	font-size: 1px;	
    	}
    I'm new to using CSS to this extent, so be gentle!
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) SPAN is an inline element, so width and text-align do not apply. IE is fooling you by allowing you to assign them.

    2) You might save a lot of typing by using descendant selectors rather than custom classes. For instance, where you have:
    Code:
    <div>
      <span class="formLabel">username<span class="asterisk">*</span></span>
      ...
    </div>
    you could do this instead...
    Code:
    <div class="formlabel">
      <p>username<b>*</b></p>
    </div>
    By using the descendant selector...
    Code:
    DIV.formlabel P { font: bold 10px Verdana,sans-serif; }
    DIV.formlabel P B { color: red; }
    ----Adopt-a-Sig----
    Your message here!

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great tip. Thanks

    Now how do I get two block-level elements (so that I CAN specify width and text-align) to appear next to eachother with CSS? I tried display:inline but that doesn't work.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, again I have it working in IE6, but still look scrunched in NS6(.2.3)

    Here are the new styles...
    Code:
    /****************** Style for data forms ****************************/
    form.dataForm {
    	width: 500px;
    	margin-left: 30px;
    	}
    div.formHeader {	
    	font: bold 15px Verdana, Arial, Helvetica, sans-serif;
    	color: #FFF;
    	background-color: #999;
    	padding: 3px;
    	border: 1px solid #000;
    	text-align: center;	
    	}
    div.formBody {
    	background-color: #FFF;
    	border: 1px solid #000;
    	width: 100%;
    	margin: 5px 0px;
    	text-align: center;
    	}
    div.formBody div p {
    	font: bold 10px Verdana, sans-serif;
    	width: 34%;
    	padding: 6px 3px 3px 3px;
    	text-align: right;
    	vertical-align: top;
    	display: inline;
    	}
    div.formBody div p em {
    	font-weight: normal;
    	}
    div.formBody div p b {
    	color: red;
    	}	
    div.formBody div span  {
    	font: normal 10px Verdana, sans-serif;
    	width: 64%;
    	padding: 3px;
    	text-align: left;
    	vertical-align: top;
    	}
    div.formFooter {
    	background-color: #999;
    	padding: 3px;	
    	border: 1px solid #000;
    	text-align: center;	
    	}
    div.formFooter input {
    	font-family: Verdana, sans-serif;
    	color: #000;
    	background-color: #FFF;
    	border: 2px #777 outset;
    	margin: 0px 5px;
    	}
    div.subHead {
    	font: bold 13px Verdana, sans-serif;
    	background-color: #BBB;
    	border-top: 1px solid #000;
    	border-bottom: 1px solid #0000;	
    	width: 100%;
    	padding: 3px;
    	}
    div.col {
    	display: inline;
    	width:49%;
    	vertical-align: top;
    	}	
    div.hr {
    	width: 100%;
    	height: 1px;
    	border-top: 1px solid #000;
    	font-size: 1px;	
    	}
    Last edited by beetle; Aug 15, 2002 at 08:52.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look into the table display styles
    ----Adopt-a-Sig----
    Your message here!

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks randem, but I'm trying to accomplish this w/o tables.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by beetle
    Thanks randem, but I'm trying to accomplish this w/o tables.
    Those are CSS-styles. Not TABLE tags.

    For instance, you can have:
    Code:
    DIV.theform { display: table; }
    DIV.formrow { display: table-row; }
    DIV.formlabel,DIV.forminput { display: table-cell; }
    and then...
    Code:
    <div class="theform">
    <div class="formrow">
      <div class="formlabel"><p>username<b>*</b></p></div>
      <div class="forminput"><input type="text ...></div>
    </div>
    </div>
    see?
    Last edited by randem; Aug 15, 2002 at 10:46.
    ----Adopt-a-Sig----
    Your message here!

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by randem
    see?
    I see! Thanks, and apologies for my hasty (and erroneous) response. I'll let you know how it works out!
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic!! Thank you randem.

    "Soon, my journey towards the Dark-Side (uh make that the W3C standards) will be complete." *hoo-hahh*
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •