[css-d] Stylized Submit Button
We are working to make a nice looking search form. I'm playing around with
a textbox with rounded corners and submit button that has an image extending
the border around the button. I'm having trouble aligning the button with
the input box. Below is the HTML and CSS used for the page (which can be
viewed at http://www.swimwebs.com/button/search.php).
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
titleUntitled Document/title
style type=text/css
form.searchForm input {
height:25px;
margin:0;
}
#searchInput {
border:0;
background-image:url(input2.png);
background-repeat:no-repeat;
vertical-align:middle; *vertical-align:text-bottom;
padding:0;
margin:0;
padding-left:5px;
}
#searchButton {
background:transparent url(button2.png) no-repeat center top;
overflow:hidden;
height:25px;
width:32px;
border:0;
vertical-align:middle; *vertical-align:text-bottom;
}
/style
/head
body
form method=post action= class=searchForm
input type=text id=searchInput size=20 /input type=submit
value=Go id=searchButton /
/form
/body
/html
The vertical-align piece of the CSS worked to fix another alignmentment
issue that caused the button to appear 3 or 4 pixels above the input
button. Now the button appears great in most major browsers but IE6 and IE7
show the input button one pixel below the input box. IE8 renders the form
correctly. Unfortunately, I have to make this work with IE7. I'm at a loss
as to how to fix this. Does anyone have any suggestions?
Thanks
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Stylized Submit Button
Floating the input elements fixed the issue.
Thanks
On Tue, Sep 8, 2009 at 2:36 PM, jeffrey morin rufus2...@gmail.com wrote:
On Tue, Sep 8, 2009 at 5:20 PM, Robbert van Andel robb...@vafam.comwrote:
We are working to make a nice looking search form. I'm playing around
with
a textbox with rounded corners and submit button that has an image
extending
the border around the button. I'm having trouble aligning the button with
the input box. Below is the HTML and CSS used for the page (which can be
viewed at http://www.swimwebs.com/button/search.php).
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 /
titleUntitled Document/title
style type=text/css
form.searchForm input {
height:25px;
margin:0;
}
#searchInput {
border:0;
background-image:url(input2.png);
background-repeat:no-repeat;
vertical-align:middle; *vertical-align:text-bottom;
padding:0;
margin:0;
padding-left:5px;
}
#searchButton {
background:transparent url(button2.png) no-repeat center top;
overflow:hidden;
height:25px;
width:32px;
border:0;
vertical-align:middle; *vertical-align:text-bottom;
}
/style
/head
body
form method=post action= class=searchForm
input type=text id=searchInput size=20 /input type=submit
value=Go id=searchButton /
/form
/body
/html
The vertical-align piece of the CSS worked to fix another alignmentment
issue that caused the button to appear 3 or 4 pixels above the input
button. Now the button appears great in most major browsers but IE6 and
IE7
show the input button one pixel below the input box. IE8 renders the form
correctly. Unfortunately, I have to make this work with IE7. I'm at a
loss
as to how to fix this. Does anyone have any suggestions?
Thanks
i'm not seeing anything with and id of searchInput or searchButton. they
exist as classes but the searchButton doesn't have an image as a background.
Have you tried setting heights on the elements and floating them? I always
have luck lining up form elements when I use the float property. I find it
is more consistent than relying on the inline display of html elements
across all browsers.
Regards,
Jeff
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE 6 Issues
My company recently contracted a new website from a vendor. The vendor made the website work great with IE 7, FireFox and Safari, but we see a few weird things with IE6, that we are trying to fix. I realize IE7 is the latest version, but our company's 3000+ computers still use IE6, so we want to get his resolved for them, if possible. The pages are set up using many divisions. The main part of the webpage has two divisions, on floating to the left called subNav which contains links and an image. The second is the mainInnerContent division. This contains the main content of of the page. When we put a table in mainInnerContent, the table appears below the level of the subNav division, as illustrated here: http://www.salemcancercare.org/draft3/physicians/bios/index.html I believe the second issue we are having is related. On some pages with a lot of text, or a bulleted list, there is a 2 or 3 pixel shift after the text passes the same subnav division. Example at www.salemcancercare.org/draft3/aboutus/partner.html The related CSS file is at http://www.salemcancercare.org/draft3/sciui.css We've tried changing the margins of both divisions but have had no luck yet. Again this only happens in IE6. Any help would be greatly appreciated. Robbert __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE 6 Issues
This certainly looked promising. I couldn't get the fix to work but I think we're just going to live with the bug and realize IE6 is slowly disappearing. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Mark Henderson Sent: Friday, May 09, 2008 1:45 PM To: Robbert van Andel; css-d Subject: Re: [css-d] IE 6 Issues Robbert van Andel wrote: I believe the second issue we are having is related. On some pages with a lot of text, or a bulleted list, there is a 2 or 3 pixel shift after the text passes the same subnav division. Example at www.salemcancercare.org/draft3/aboutus/partner.html Sounds like this: http://www.positioniseverything.net/explorer/threepxtest.html HTH Mark __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Strange Print Issue
Thank you, that was exactly the fix I needed.
Much appreciated.
Robbert
From: Robbert van Andel [EMAIL PROTECTED]
In particular the text appears outside the borders of the containing
division. when printing
Can any suggest what I can do to fix this?
http://www.salemhospital.org/clinicalresearch/print.php
IE needs layout [1] on at least two elements. Add {zoom: 1;} to the -
div.trials_title, div.trials_treatment, div.trials_eligibility - selector (only
tested in IE6, by the way). Note that this will not validate.
You might consider placing a complete doctype on your page as well, though it
doesn't seem to make a difference with the printing issue. See [2] for more
information about doctypes.
~holly
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2] http://www.communitymx.com/abstract.cfm?cid=E2F258C46D285FEE
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Strange Print Issue
I developed a webpage using CSS and divisions to output a printable report for my company. The page renders great on the screen but when you print the page in IE, many of the pages after the first once come out strange. In particular the text appears outside the borders of the containing division. I've checked both the HTML and CSS against the W3's HTML and CSS validators and both checks come out valid. Can any suggest what I can do to fix this? The page is at: http://www.salemhospital.org/clinicalresearch/print.php Thank you, Robbert van Andel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Absolute Position Problem
Sorry if this is a repeat. I sent this last night, but never saw it arrive. I'm putting together a webpage that will allow someone to print out a form and I'm using a series of absolutely positioned divisions to display the information. I spent many hours positioning these divisions using Firefox and when I tested it in IE nothing shows up. When I changed the position setting to relative, everything appears but of course it's not where I want it. I thought it might be a problem with invalid HTML but the site validates according to the validator at the W3's website. Can anyone tell me what I'm doing wrong? Or better yet, what I need to do to make this work in IE? I've included the source code at http://drloganbill.com/test/sample.htm Thank you, Robbert van Andel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Div Height
I recently updated my website, replacing a table with a div as the body of
the page. I want this division to be at least the height of the screen but
also grow if content scrolls off the page. In IE, the page renders fine,
but in FireFox, the division does not grow if the text scrolls beyond the
bottom of the screen.
An example page is http://www.swimoregon.org/AquaMaster/
The division's id is body and below is the relevant css
body {
height:100%;
padding:0;
margin:0px;
text-align:center;
background-color: #336EA8;
}
#body {
width: 649px;
min-height: 100%;
height: 100%;
border-left:4px solid #00;
border-right:4px solid #00;
padding-left:2px;
padding-right:2px;
background-color:#ff;
margin-left:auto;
margin-right:auto;
}
I'm constantly fighting with this set up and actually used a table on
another website to avoid this problem. I would really like to figure out
how to do this with a division as I understand that tables are deprecated in
the use of layout.
Thank you,
Robbert van Andel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div Height
That was it.
Thank you,
Robbert
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun
Sent: Tuesday, February 21, 2006 6:23 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Div Height
Robbert van Andel wrote:
I recently updated my website, replacing a table with a div as the
body of the page. I want this division to be at least the height of
the screen but also grow if content scrolls off the page. In IE, the
page renders fine, but in FireFox, the division does not grow if the
text scrolls beyond the bottom of the screen.
http://www.swimoregon.org/AquaMaster/
I'm constantly fighting with this set up and actually used a table on
another website to avoid this problem. I would really like to
figure out how to do this with a division as I understand that tables
are deprecated in the use of layout.
The solution is to make divs behave/render like tables, by adding...
#body {display: table;}
...so they do expand with content as tables does. That's according to
CSS specs, so Firefox will do just fine with it.
IE/win doesn't understand 'display: table;' but IE6 and older versions
are saved by a bug called 'Layout'[1]. Don't know how IE7 will do
though, as it won't be up to standards and they have partially killed
that 'Layout' bug.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Images and Divs
I'm working on a web redesign and am hoping to avoid using tables as much as
possible but so far no luck.
I'm designing so that my page will work in IE and Firefox since those are
two browsers I have readily available. The page can be found at
http://oms.swimwebs.com http://oms.swimwebs.com/ . Here's the problem.
At the top of the page are 5 pictures all set to width of 125px with a
border of 2px around each picture. That makes for a total width of 649px (5
x 125 + 5 x 2 x 2). The page renders great in firefox but in IE the width
is not working. Below the CSS that I'm working with. Also, what do I need
to change to center my main division in IE?
Any help would be greatly appreciated.
Thanks,
Robbert van Andel
--- CSS --
body {
padding:0;
margin:0px;
height:100%;
}
#body {
width: 649px;
height:100%;
border-left:4px solid #2DA1AE;
border-right:4px solid #2DA1AE;
padding-left:2px;
padding-right:2px;
background-color:#ff;
margin-left:auto;
margin-right:auto;
}
#header {
/*white-space:nowrap;*/
border: 2px solid #00;
padding: 0px;
margin: 0px;
}
p.top {
margin:0px;
padding:0px;
}
img.top {
border:2px solid #00;
padding: 0px;
width: 125px;
height: 125px;
margin:0px;
}
#logo {
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Images and Divs
Bingo, that did the trick. Thanks. -Original Message- From: Thierry Koblentz [mailto:[EMAIL PROTECTED] Sent: Monday, October 10, 2005 9:57 PM To: Robbert van Andel; css-d@lists.css-discuss.org Subject: Re: [css-d] Images and Divs Robbert van Andel wrote: I'm working on a web redesign and am hoping to avoid using tables as much as possible but so far no luck. I'm designing so that my page will work in IE and Firefox since those are two browsers I have readily available. The page can be found at http://oms.swimwebs.com http://oms.swimwebs.com/ . Here's the problem. At the top of the page are 5 pictures all set to width of 125px with a border of 2px around each picture. That makes for a total width of 649px (5 x 125 + 5 x 2 x 2). The page renders great in firefox but in IE the width is not working. Below the CSS that I'm working with. Also, what do I need to change to center my main division in IE? Hi Robbert, You have to *remove* the XML prologue: ?xml version=1.0 encoding=UTF-8? or take the broken box model into consideration. That's why the maths don't work, because IE is in quirks mode and substracts padding and border form the dimension of the box. HTH, Thierry | www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Odd Mac Issue
Nope, I did nothing to fix this issue. As far as I can see most of the people on this list using Macs have no issue with the site, so I'm chalking this up to the user using an older browser that isn't fully compliant. Unless I hear from anyone else on this list that has the issue, I'm going to drop it. Thanks for your feedback to those that sent it. -Original Message- Robert, On Jun 26, 2005, at 9:45 PM, Robbert van Andel wrote: Hello, I design a website at www.oregonswimming.org http://www.oregonswimming.org/ that is having trouble when viewed by a few Mac users. The pictures are at http://www.swimwebs.com/css/css-error1.jpg Did you fix it already? I tried the problem pages in ie/mac 5.2.3 and couldn't replicate what the pictures show. Roger, Roger Roelofs Know what you value. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
