Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Gradient Background Color not in IE

    Hi,
    I'm trying to put a gradient background color on my web page. For IE, i'm using
    Code:
    filter : progid : DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');
    But i have difficulties finding a good solution for other browsers. For opera, i tried using the following style on the body element:
    Code:
    background-image: -o-linear-gradient(bottom right,rgb(192,207,226),rgb(255,255,255));
    But the gradient doesn't fill the whole page. I mean, my web page only has a few rows of text and the gradient finishes after the last row. Then, it starts again under, so i have two rows of gradient color. Plus that my web page is pretty wide, so the user has to use the scrollbar to navigate sideways. But the gradient only covers the visible part of the screen, so when i scroll to the right, it's just a white background.
    Is there any way i could have a gradient color to cover the entire page?
    I have to say, i don't use HTML and CSS very often, so maybe i'm missing something.
    Thank you.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Anakin1989,
    Hard to say without seeing your page but I would guess that background needs to be on the body.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello Excavator, thanks for your reply.
    The background is in the body. I will post the code, it is created by a servlet, so it's not very organized.

    Code:
    <html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Baza De Date</title>
    </head>
    <body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');background-image: -o-linear-gradient(bottom right,rgb(192,207,226),rgb(255,255,255));" onLoad="document.getElementById(100).focus()">
    <h1 align="center"><b>Baza de date medicament</b></h1><br>
    <FORM METHOD="POST" ACTION="/ServletApp/servlet/TableView"><p style="font-family:arial;color:black;font-size:20px;">Tabelul pentru vizualizare</p><p><input TYPE="RADIO" NAME="radio1" VALUE="medicRadio"
    onClick="submit()">Medic<input TYPE="RADIO" NAME="radio1" VALUE="pacientRadio"
    onClick="submit()">Pacient<input TYPE="RADIO" NAME="radio1" VALUE="medicamentRadio"
    CHECKED="checked"
    onClick="submit()">Medicament<input TYPE="RADIO" NAME="radio1" VALUE="consultatieRadio"
    onClick="submit()">Consultatie</p></FORM><BR><h4><font color="red"> </font><BR>
    <FORM NAME=myform METHOD="POST"  ACTION="/ServletApp/servlet/TableView">
    <TABLE BORDER="1" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#3982DB', startColorstr='#98B6DA', gradientType='0');"><TR><TH>ID</TH><TH>Denumire</TH><TH>Sterge</TH></TR>
    <TR><TD><INPUT TYPE="TEXT" NAME="medicamentID" SIZE=3 VALUE="1" readonly></TD><TD><INPUT TYPE="TEXT" NAME="denumire" SIZE=20 ID=100></TD></TR>
    </TABLE><P><INPUT TYPE="SUBMIT" VALUE="Update database" NAME="B1"></P></FORM>
    </h4></body></html>

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Giving the document a 100% height might help. Another line or two from the CSS will help with other browsers, try this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baza De Date</title>
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0;
    }
    body {
    	background: #fff;
    	background: -moz-linear-gradient(top, #fff, #c0cfe2);
    	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0cfe2));
    	color: #000;
    	height: auto;
    }
    </style>
    </head>
    <body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');>
    <h1 align="center"><b>Baza de date medicament</b></h1>
    <br>
    <FORM METHOD="POST" ACTION="/ServletApp/servlet/TableView">
      <p style="font-family:arial;color:black;font-size:20px;">Tabelul pentru vizualizare</p>
      <p>
        <input TYPE="RADIO" NAME="radio1" VALUE="medicRadio"
    onClick="submit()">
        Medic
        <input TYPE="RADIO" NAME="radio1" VALUE="pacientRadio"
    onClick="submit()">
        Pacient
        <input TYPE="RADIO" NAME="radio1" VALUE="medicamentRadio"
    CHECKED="checked"
    onClick="submit()">
        Medicament
        <input TYPE="RADIO" NAME="radio1" VALUE="consultatieRadio"
    onClick="submit()">
        Consultatie</p>
    </FORM>
    <BR>
    <h4><font color="red"> </font><BR>
      <FORM NAME=myform METHOD="POST"  ACTION="/ServletApp/servlet/TableView">
        <TABLE BORDER="1" style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#3982DB', startColorstr='#98B6DA', gradientType='0');">
          <TR>
            <TH>ID</TH>
            <TH>Denumire</TH>
            <TH>Sterge</TH>
          </TR>
          <TR>
            <TD><INPUT TYPE="TEXT" NAME="medicamentID" SIZE=3 VALUE="1" readonly></TD>
            <TD><INPUT TYPE="TEXT" NAME="denumire" SIZE=20 ID=100></TD>
          </TR>
        </TABLE>
        <P>
          <INPUT TYPE="SUBMIT" VALUE="Update database" NAME="B1">
        </P>
      </FORM>
    </h4>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Anakin1989 (11-03-2011)

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It works perfectly, thank you very much!


  •  

    Posting Permissions

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