[WSG] Styling a hyperlink like a button using CSS
I'm trying to style a hyperlink to look like a button using a sprite image, the button needs to be flexible for different lengths of text. problem with the one i've built, it's not flexible in IE6. Looking for suggestions as to how to better code a button like that. Example: http://www.oonagi.org/button Cheers Caleb *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] elasticity and floats
Thanks Martin,
I tried your mark-up, but found a gap between adleft1 and 2. I shifted the
outer div, removed the margins and Presto! [1] However, I'm getting confused
now as to why this should work whilst others didn't [2]
Bob
[1]http://www.rspcacornwall.org.uk/testbed/floatdivs_martin.html
[2] http://www.rspcacornwall.org.uk/testbed/floatdivs_cjapplied.html
- Original Message -
From: Martin Heiden martin.hei...@netcologne.de
To: designer wsg@webstandardsgroup.org
Sent: Wednesday, October 07, 2009 8:36 PM
Subject: Re[2]: [WSG] elasticity and floats
Hi Bob!
May I add another wrapper div? Try the following. Probably you want
to tweak some withs and margins.
Regards,
Martin.
!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 /
titleTest/title
style type=text/css
#outer {
border: 1px solid red;
width: 50%;
}
#inner {
margin-left: 250px;
margin-right: 100px;
}
#adleft1 {
float: left;
width: 100px;
height: 100px;
margin-left: -250px;
background: #c00;
}
#adleft2 {
float: left;
width: 100px;
height: 100px;
margin-left: -100px;
background: #0c0;
}
#adcenter {
height: 100px;
background: #00c;
margin: 0 -1px;
}
#adright {
float: right;
width: 100px;
height: 100px;
margin-right: -100px;
background: #c00;
}
/style
/head
body
div id=outer
div id=inner
div id=adleft1/div
div id=adleft2/div
div id=adright/div
div id=adcenter/div
/div
/div
/body
/html
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] styling a select box
Regularly I run into problems with styling the select box... I like to change the look of the select box button and put the button (and the option text) on the left-hand side and have it showing exactly the same in all modern browsers but I have not much luck with that... Applying more advanced css to the select box that works with all modern browsers in the same way appears to be impossible. Not much pretty styling can be done with the select box's button without the use of often long and complicated scripts or alternatively to replace the box with Flash.. Are there any examples of simple to apply css for customizing the select box button? Is it really that hard or am I overlooking something and am I maybe looking in the wrong places? I can use some help with this.. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] elasticity and floats
Actually Martin,
The flexible div does still expand to fit the whole wrapper in FF3 etc. It
is disguised by the background colours. If you remove all the bk colours
apart from the elastic one, you'll see this in action!
:-(
Bob
- Original Message -
From: designer desig...@gwelanmor-internet.co.uk
To: wsg@webstandardsgroup.org
Sent: Thursday, October 08, 2009 10:24 AM
Subject: Re: [WSG] elasticity and floats
Thanks Martin,
I tried your mark-up, but found a gap between adleft1 and 2. I shifted the
outer div, removed the margins and Presto! [1] However, I'm getting
confused
now as to why this should work whilst others didn't [2]
Bob
[1]http://www.rspcacornwall.org.uk/testbed/floatdivs_martin.html
[2] http://www.rspcacornwall.org.uk/testbed/floatdivs_cjapplied.html
- Original Message -
From: Martin Heiden martin.hei...@netcologne.de
To: designer wsg@webstandardsgroup.org
Sent: Wednesday, October 07, 2009 8:36 PM
Subject: Re[2]: [WSG] elasticity and floats
Hi Bob!
May I add another wrapper div? Try the following. Probably you want
to tweak some withs and margins.
Regards,
Martin.
!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 /
titleTest/title
style type=text/css
#outer {
border: 1px solid red;
width: 50%;
}
#inner {
margin-left: 250px;
margin-right: 100px;
}
#adleft1 {
float: left;
width: 100px;
height: 100px;
margin-left: -250px;
background: #c00;
}
#adleft2 {
float: left;
width: 100px;
height: 100px;
margin-left: -100px;
background: #0c0;
}
#adcenter {
height: 100px;
background: #00c;
margin: 0 -1px;
}
#adright {
float: right;
width: 100px;
height: 100px;
margin-right: -100px;
background: #c00;
}
/style
/head
body
div id=outer
div id=inner
div id=adleft1/div
div id=adleft2/div
div id=adright/div
div id=adcenter/div
/div
/div
/body
/html
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] Local W3C CSS Validator for Windows
Can anyone help me with a good W3C CSS Validator that will run on Windows? Cheers Daniel *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] elasticity and floats
Bob,
you removed to much margins. The magic was caused by the negative
margins. The gap was intended. You can remove it by adjusting the
negative margin and the width of adleft2.
regards,
Martin
on Thursday, October 8, 2009 at 13:02 wsg@webstandardsgroup.org wrote:
Actually Martin,
The flexible div does still expand to fit the whole wrapper in FF3 etc. It
is disguised by the background colours. If you remove all the bk colours
apart from the elastic one, you'll see this in action!
:-(
Bob
- Original Message -
From: designer desig...@gwelanmor-internet.co.uk
To: wsg@webstandardsgroup.org
Sent: Thursday, October 08, 2009 10:24 AM
Subject: Re: [WSG] elasticity and floats
Thanks Martin,
I tried your mark-up, but found a gap between adleft1 and 2. I shifted the
outer div, removed the margins and Presto! [1] However, I'm getting
confused
now as to why this should work whilst others didn't [2]
Bob
[1]http://www.rspcacornwall.org.uk/testbed/floatdivs_martin.html
[2] http://www.rspcacornwall.org.uk/testbed/floatdivs_cjapplied.html
- Original Message -
From: Martin Heiden martin.hei...@netcologne.de
To: designer wsg@webstandardsgroup.org
Sent: Wednesday, October 07, 2009 8:36 PM
Subject: Re[2]: [WSG] elasticity and floats
Hi Bob!
May I add another wrapper div? Try the following. Probably you want
to tweak some withs and margins.
Regards,
Martin.
!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 /
titleTest/title
style type=text/css
#outer {
border: 1px solid red;
width: 50%;
}
#inner {
margin-left: 250px;
margin-right: 100px;
}
#adleft1 {
float: left;
width: 100px;
height: 100px;
margin-left: -250px;
background: #c00;
}
#adleft2 {
float: left;
width: 100px;
height: 100px;
margin-left: -100px;
background: #0c0;
}
#adcenter {
height: 100px;
background: #00c;
margin: 0 -1px;
}
#adright {
float: right;
width: 100px;
height: 100px;
margin-right: -100px;
background: #c00;
}
/style
/head
body
div id=outer
div id=inner
div id=adleft1/div
div id=adleft2/div
div id=adright/div
div id=adcenter/div
/div
/div
/body
/html
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
regards
Martin
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Local W3C CSS Validator for Windows
I use Web Developer Toolbar for Firefox to validate local CSS files, It's great. :) https://addons.mozilla.org/en-US/firefox/addon/60 /Palle On Thu, Oct 8, 2009 at 1:48 PM, Daniel Anderson daniela...@gmail.com wrote: Can anyone help me with a good W3C CSS Validator that will run on Windows? Cheers Daniel *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Local W3C CSS Validator for Windows
On 8 Oct 2009, at 12:48, Daniel Anderson wrote: Can anyone help me with a good W3C CSS Validator that will run on Windows? The W3C only provide one CSS validator. It is written in Java though, so it should run on Windows. http://jigsaw.w3.org/css-validator/DOWNLOAD.html -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Andrew is out of the office... [SEC=No Protective Marking Present]
I will be out of the office starting 08/10/2009 and will not return until 12/10/2009. Medicare Australia is reimbursing the cost of external breast prostheses. For information and to check your eligibility call 132 011 or visit our website. __ NOTICE - This message is intended only for the use of the addressee named above and may contain privileged and confidential information. If you are not the intended recipient of this message you are hereby notified that you must not disseminate, copy or take any action based upon it. If you received this message in error please notify Medicare Australia immediately. Any views expressed in this message are those of the individual sender, except where the sender specifically states them to be the views of Medicare Australia. Please consider the environment before printing this e-mail *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] styling a select box
abandon all hopes, brother )) 2009/10/8 Bas V basby...@hotmail.com Regularly I run into problems with styling the select box... I like to change the look of the select box button and put the button (and the option text) on the left-hand side and have it showing exactly the same in all modern browsers but I have not much luck with that... Applying more advanced css to the select box that works with all modern browsers in the same way appears to be impossible. Not much pretty styling can be done with the select box's button without the use of often long and complicated scripts or alternatively to replace the box with Flash.. Are there any examples of simple to apply css for customizing the select box button? Is it really that hard or am I overlooking something and am I maybe looking in the wrong places? I can use some help with this.. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- С уважением Кириченко Сергей верстальщик тел. +7 (904) 333-46-25 starhack.ru *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] styling a select box
You could just use a regular select, and then use javascript to find it, strip it out, and replace it with your own uber-select. Here's something along those lines: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ - James 2009/10/8 Сергей Кириченко tt.s...@gmail.com abandon all hopes, brother )) 2009/10/8 Bas V basby...@hotmail.com Regularly I run into problems with styling the select box... I like to change the look of the select box button and put the button (and the option text) on the left-hand side and have it showing exactly the same in all modern browsers but I have not much luck with that... Applying more advanced css to the select box that works with all modern browsers in the same way appears to be impossible. Not much pretty styling can be done with the select box's button without the use of often long and complicated scripts or alternatively to replace the box with Flash.. Are there any examples of simple to apply css for customizing the select box button? Is it really that hard or am I overlooking something and am I maybe looking in the wrong places? I can use some help with this.. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- С уважением Кириченко Сергей верстальщик тел. +7 (904) 333-46-25 starhack.ru *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- James Ducker Web Developer http://www.studioj.net.au *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Local W3C CSS Validator for Windows
Yeah I have it running on Windows. The easiest way is to install a server that can autodeploy war files, like Tomcat. - James 2009/10/8 David Dorward da...@dorward.me.uk On 8 Oct 2009, at 12:48, Daniel Anderson wrote: Can anyone help me with a good W3C CSS Validator that will run on Windows? The W3C only provide one CSS validator. It is written in Java though, so it should run on Windows. http://jigsaw.w3.org/css-validator/DOWNLOAD.html -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- James Ducker Web Developer http://www.studioj.net.au *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Lisa Kerrigan/StateDevPolicy/DSD is out of the office.
I will be out of the office starting 09/10/2009 and will not return until 14/10/2009. Content Requests should be lodged with the Content Submission Engine via the intranet or contact Travis Walton. For technical advice contact Ming Ma. For other requests contact Brendan Halloran or Wendy Pryor. * Department of Innovation, Industry and Regional Development,Government of Victoria, Victoria, Australia. This e-mail and any attachments may contain privileged and confidential information. If you are not the intended recipient, you may not distribute reproduce this e-mail the attachments. If you have received this message in error, please notify us by return e-mail. *- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] styling a select box
Actually it shouldn't be skinned even if we can access it through the
css. Moreover, possibilities are limited. You won't go far. You can just
take a look at
http://www.456bereastreet.com/lab/styling-form-controls-revisited/ to
understand that it's simply not possible.
Please tell me if I'm wrong, default form fields are native elements
from the browser, like the menu bar, the prev - next - button, etc... So
it's related to the OS and the user preferences (linux gtk - qt).
What we did at my previous work: evangelizing. Make some screenshots,
talk with designers about the real possibilities, and with anyone
related to the management / sells / account to make them understand and
the client too that form fields depends from the OS and are not the
pixel to pixel design viewed on the jpeg - psd whatever.
Anyway, about cross-browsering, with css i sometimes use this: (I don't
say it's the right way)
input, select, textarea {
display: -/moz/-/inline/-/box/;
display: /inline/-block;
vertical-align: middle; /* Or baseline */
margin:0;
}
By reseting the margin and the display properties, the fields seem to
have the same expected behavior on every browser.
For the select, it's not cool because if you set a width, and
options'text are longer, it's cropped with some browsers (IE ?).
For the height, depending from the situation you have to play with
height and/or padding and/or line-height
Setting a solid border often deletes the additional borders ( little 3d
- shadows ).
I think it's better to not change the padding. (or take care with
checkbox - radio input )
Then take care because starting playing with background-color,
background-image or javascript or flash, you will simply start
unaccessibilizing some features and often degrading the user
experiences. There are some workarounds, nothing easy at the moment to
my mind.
To conclude everything depends from your case. (Web site, web
application, etc...) There are possibilities to perform a whole custom
select, but it's not the same development, it's not the same schedule,
it's not the same rendering, and PRIMARY it's not the same usability as
native select.
Cheers,
ピエールランリ
James Ducker さんは書きました:
You could just use a regular select, and then use javascript to find
it, strip it out, and replace it with your own uber-select.
Here's something along those lines:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
- James
2009/10/8 Сергей Кириченко tt.s...@gmail.com
mailto:tt.s...@gmail.com
abandon all hopes, brother ))
2009/10/8 Bas V basby...@hotmail.com mailto:basby...@hotmail.com
Regularly I run into problems with styling the select box...
I like to change the look of the select box button and put the
button (and the option text) on the left-hand side and have it
showing exactly the same in all modern browsers but I have not
much luck with that...
Applying more advanced css to the select box that works with
all modern browsers in the same way appears to be impossible.
Not much pretty styling can be done with the select box's
button without the use of often long and complicated scripts
or alternatively to replace the box with Flash..
Are there any examples of simple to apply css for customizing
the select box button?
Is it really that hard or am I overlooking something and am I
maybe looking in the wrong places?
I can use some help with this..
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
mailto:memberh...@webstandardsgroup.org
***
--
С уважением
Кириченко Сергей
верстальщик
тел. +7 (904) 333-46-25
starhack.ru http://starhack.ru
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
mailto:memberh...@webstandardsgroup.org
***
--
James Ducker
Web Developer
http://www.studioj.net.au
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe:
[WSG] IE6 display issue
Good morning all http://www.westernwebdesign.com.au/keynorthcontractors/index.html #header has a background image (logo) and an image floated right that with the help of Javascript fades and replaces itself with another 4 times and so on. Works OK except for IE6. In IE6, although the image fades and replaces etc, the #header is enlarged to accommodate all 4 images though three remain hidden. If I refresh the page a few times, it displays as it should, although temporarily. If I refresh again, it reverts to the large header space. It is a bit like the peek-a-boo bug but I have tried all solutions to that to no avail. Does anyone see a problem with my code? Is it perhaps the Javascript? Thanks. -- Lyn Smith www.westernwebdesign.com.au Affordable website design Perth WA *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE6 display issue
On Fri, 9 Oct 2009, Western Web Design wrote: http://www.westernwebdesign.com.au/keynorthcontractors/index.html There is a problem with ungainly wordspacing in the justified text and text that overflows its box: http://cfaj.freeshell.org/testing/keynorth.jpg. -- Chris F.A. Johnson, webmaster http://woodbine-gerrard.com === Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Styling a hyperlink like a button using CSS
Hi, Search for Sliding Doors button, you'l get heaps of results with a few different implementations. cheers L Caleb Wong wrote: I'm trying to style a hyperlink to look like a button using a sprite image, the button needs to be flexible for different lengths of text. problem with the one i've built, it's not flexible in IE6. Looking for suggestions as to how to better code a button like that. Example: http://www.oonagi.org/button Cheers Caleb *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- Luke Hoggett 0419 442 807 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Local W3C CSS Validator for Windows
Hi, Try web developer toolbar on Firefox, OS independent otherwise this link may help http://www.google.com.au/search?q=W3C+CSS+Validator+for+Windowsie=utf-8oe=utf-8aq=trls=org.mozilla:en-GB:officialclient=firefox-a ciao L Daniel Anderson wrote: Can anyone help me with a good W3C CSS Validator that will run on Windows? Cheers Daniel *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- Luke Hoggett 0419 442 807 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE6 display issue
HiChris http://www.westernwebdesign.com.au/keynorthcontractors/index.html There is a problem with ungainly wordspacing in the justified text and text that overflows its box: http://cfaj.freeshell.org/testing/keynorth.jpg. I am not seeing that at all - where are you seeing it? 3 boxes @ 250px wide should fit in a 900px wide footer, shouldn't they? Even with padding I changed the original liquid design to a fixed width one as I was getting a lot of problems like that so I don't understand how it is happening. Thanks Lyn -- Lyn Smith www.westernwebdesign.com.au Affordable website design Perth WA *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE6 display issue
On Fri, 9 Oct 2009, Western Web Design wrote: http://www.westernwebdesign.com.au/keynorthcontractors/index.html There is a problem with ungainly wordspacing in the justified text and text that overflows its box: http://cfaj.freeshell.org/testing/keynorth.jpg. I am not seeing that at all - where are you seeing it? 3 boxes @ 250px wide should fit in a 900px wide footer, shouldn't they? Even with padding I changed the original liquid design to a fixed width one as I was getting a lot of problems like that so I don't understand how it is happening. The text doesn't fit into the height you have given the box. (Not everyone uses the same font-size as you.) The spacing on the justified text is made worse because you have contrained the width; if it were allowed to expand to fill the window, more words would fit on a line and there wouldn't be such large interword spacing. -- Chris F.A. Johnson, webmaster http://woodbine-gerrard.com === Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] IE6 display issue
In IE6, although the image fades and replaces etc, the #header is
enlarged to accommodate all 4 images though three remain hidden.
Hi,
I suspect that the javascript is executing before the page has fully loaded
so the images are not able to be stacked by the javascript function. To
make sure your page has fully loaded try using the document.ready function
of jquery:
SCRIPT type=text/javascript
$(document).ready(function() {
$('#pics').cycle({
fx:'fade',
speed: 2500,
timeout: 5500,
random: 1,
pause: 1
});
});
/SCRIPT
If that still doesn't work, try moving the javascript after the /body.
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] IE6 display issue
Chris F.A. Johnson wrote: On Fri, 9 Oct 2009, Western Web Design wrote: http://www.westernwebdesign.com.au/keynorthcontractors/index.html There is a problem with ungainly wordspacing in the justified text and text that overflows its box: http://cfaj.freeshell.org/testing/keynorth.jpg. I am not seeing that at all - where are you seeing it? 3 boxes @ 250px wide should fit in a 900px wide footer, shouldn't they? Even with padding I changed the original liquid design to a fixed width one as I was getting a lot of problems like that so I don't understand how it is happening. The text doesn't fit into the height you have given the box. (Not everyone uses the same font-size as you.) Sorry, Chris - I have not given the box a height so not sure what you mean. It has margin and padding. The spacing on the justified text is made worse because you have contrained the width; I don't know what you mean by contrained. Sorry, not a word I have come across. I have changed the justified text to left-align. Does this make a difference? Thanks. -- Lyn Smith www.westernwebdesign.com.au Affordable website design Perth WA *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE6 display issue
On Fri, 9 Oct 2009, Western Web Design wrote: Chris F.A. Johnson wrote: On Fri, 9 Oct 2009, Western Web Design wrote: http://www.westernwebdesign.com.au/keynorthcontractors/index.html There is a problem with ungainly wordspacing in the justified text and text that overflows its box: http://cfaj.freeshell.org/testing/keynorth.jpg. I am not seeing that at all - where are you seeing it? 3 boxes @ 250px wide should fit in a 900px wide footer, shouldn't they? Even with padding I changed the original liquid design to a fixed width one as I was getting a lot of problems like that so I don't understand how it is happening. The text doesn't fit into the height you have given the box. (Not everyone uses the same font-size as you.) Sorry, Chris - I have not given the box a height so not sure what you mean. It has margin and padding. As you can see from the JPEG I posted, the CAPABILITY STATEMENT falls below the footer. You need to add clear: both to the Website by paragraph. The spacing on the justified text is made worse because you have contrained the width; I don't know what you mean by contrained. Sorry, not a word I have come across. Typo; I meant constrained. I have changed the justified text to left-align. Does this make a difference? That is better. -- Chris F.A. Johnson, webmaster http://woodbine-gerrard.com === Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE6 display issue
Hi Chris OK - I think I get it now - something to do with font-size. I can see what you see if I don't specify a font-size on the #footer. But as I HAVE specified a font-size, I don't understand why you see what you see. Thanks. -- Lyn Smith www.westernwebdesign.com.au Affordable website design Perth WA *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE6 display issue
Chris F.A. Johnson wrote: http://www.westernwebdesign.com.au/keynorthcontractors/index.html There is a problem with ungainly wordspacing in the justified text and text that overflows its box: http://cfaj.freeshell.org/testing/keynorth.jpg. As you can see from the JPEG I posted, the CAPABILITY STATEMENT falls below the footer. You need to add clear: both to the Website by paragraph. OK thanks - I am assuming this issue is only in IE6? I've done a lot of browsershots and they seem OK as far as the #footer is concerned, except for IE6. -- Lyn Smith www.westernwebdesign.com.au Affordable website design Perth WA *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
