SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Text Field Causing Havoc!!

    Hi guys,

    Bit of a problem. My site works fine in Opera and Firefox however transferring it across to IE and it's screwed!

    http://www.student3.lincoln.ac.uk/csstest/

    As you can see Ive sliced up an image and in the space where I wanted a text field to be placed Ive put a regular text field and tweaked how it looks using a little piece of CSS.

    The code is:

    Code:
    .texta { 
     font-size: 15px;
     width: 143px; 
     background-color: #CCCCCC; 
     border: 1px solid #666666; 
    }
    No problems in Opera or Firefox, but in IE the sliced image above the text field is shoved up and the image below the text field shoved down. Is there anyway of solving this?

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no doctype so different browsers will act differently.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think people rely on hacks too easily nowadays the main aim should be to get in working using the same styles, which is why Ive been recommended to do this:

    Since the header imagery is basically a background, implement it as CSS background, and sit the form on top. That way, your header background will remain intact even is the placement of the search form isn't pixel perfect.

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm....

    Not working. Ive set the top part of my header as a background.

    http://www.student3.lincoln.ac.uk/csstest/slice.html

    And in the table ive inserted a text field and edited its placement in the CSS file. The text field looks fine in Opera, however in Firefox and IE its not where I want it to be.

    My HTML code is as follows:

    Code:
    <HTML>
    <HEAD>
    <TITLE>Online Club Shop</TITLE>
    <link rel="stylesheet" href="stylesheet.css"/>
    <style type="text/css">
    body {
    background-color: #e5eef5;
    }
    </style>
    </HEAD>
    <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
    <!-- ImageReady Slices (slice.psd) -->
    <TABLE WIDTH=748 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
    	<TR>
    		<TD height="151" COLSPAN=9 background="images/slice_01.jpg"><form name="form1" method="post" action="">
    		  <input name="textfield" type="text" class="texta" />
    		  </form>
    	  </TD>
    	</TR>
    	<TR>
    		<TD>
    			<IMG SRC="images/slice_02.jpg" WIDTH=1 HEIGHT=25 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/slice_03.jpg" WIDTH=55 HEIGHT=25 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/slice_04.jpg" WIDTH=91 HEIGHT=25 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/slice_05.jpg" WIDTH=80 HEIGHT=25 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/slice_06.jpg" WIDTH=124 HEIGHT=25 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/slice_07.jpg" WIDTH=83 HEIGHT=25 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/slice_08.jpg" WIDTH=99 HEIGHT=25 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/slice_09.jpg" WIDTH=94 HEIGHT=25 ALT=""></TD>
    		<TD>
    			<IMG SRC="images/slice_10.jpg" WIDTH=121 HEIGHT=25 ALT=""></TD>
    	</TR>
    </TABLE>
    <!-- End ImageReady Slices -->
    </BODY>
    </HTML>
    And the CSS part for the 'texta' class is:

    Code:
    .texta { 
     position : absolute;
     left : 703px;
     top : 124px;
     font-size: 11px;
     width: 127px; 
     background-color: #CCCCCC; 
     border: 1px solid #000; 
    
    }
    Any help would be much appreciated!


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
  •