Re: [WSG] Please Help! Hover not working to trigger display:block in FF
The dropdown menu's s'posed to be nested within the li from which it's
to drop down from - it can't be a completely separate ul.
On Sat, 24 Feb 2007 11:08:30 +1000, Cole Kuryakin [EMAIL PROTECTED] wrote:
Hello All -
I've done this successfully in one previous project, but can't for the
life
of me understand what I'm doing wrong now.
I've got a UL nav bar with a number of li's.
I've set one of the li's as css trigger (via a class name) in order to
show
a drop-down menu (a UL) that has a default value of display:none.
Unfortunately, nothing I try will initiate the declaration containing the
display:block.
My CSS and test.html page validates so I don't know where I'm going
wrong.
Could someone please show me the error of my ways?
To see this live, please go here: http://www.x7m.us/_problems/test.htm
and
hover over the Industry li . of course, you won't see anything happen
as
this is the crux of my problem.
HTML and CSS copied below for convenience.
Appreciate any and all guidance on how to fix this
Cole
HTML
!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=iso-8859-1
/
link href=a/style/test.css rel=stylesheet type=text/css
media=screen /
/head
body
div id=wrapper
ul id=navTop
li class=noLeftPaddingHome/li
li class=testIndustry/li /*class .test is suppose to be
the trigger*/
liClientele/li
liPartners/li
liCareers/li
liAbout/li
liContact/li
/ul
ul id=industry class=menu
liImmigration Information/li
liPOEA Regulations/li
liDisciplinary Guidelines/li
liPOEA Sample Contract/li
liQuestions and Answers/li
/ul
/div
/body
/html
CSS
/* --- Global Properties
--- */
* {
margin: 0;
padding: 0;
border: none;
}
html{
height: 100%;
}
body{
min-width: 770px;
min-height: 101%;
text-align: center;
font-family: Arial, Verdana, Tahoma, Helvetica, Geneva,
sans-serif;
font-weight: normal;
font-size: 100%;
background-color: #000;
color: #000;
}
#wrapper {
position: relative;
width: 770px;
height: 500px;
margin: 0px auto;
text-align: left;
color: inherit;
background-color: #FFF;
}
ul {
list-style: none;
}
/* --- Nav Top
*/
#navTop { /*THIS IS A UL*/
height: 42px;
padding-left: 10px;
padding-top: 3px;
background-color: #00CC00;
}
#navTop li {
display: inline;
border-right: 1px solid white;
padding-top: 12px;
padding-bottom: 24px;
padding-right: 26px;
padding-left: 6px;
font-weight: bold;
font-size: 0.75em;
}
#navTop li.noLeftPadding {
padding-left: 0;
}
/* --- Drop Down Menus
*/
#industry {
position: absolute;
top: 45px;
left: 70px;
display: none; /*INDUSTRY UL IS HIDDEN BY DEFAULT*/
}
ul#navTop li.test:hover ul#industry { /*I THINK THIS IS THE PROBLEM
AREA*/
display: block;
}
li.test {
cursor: pointer;
}
.menu {
background-color: #FFCC99;
}
.menu li {
padding: 5px 10px;
font-size: 0.75em;
border-bottom: 1px solid black;
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] IE footer problem at low resolution
It's margin-bottom: -40px on #container which is causing the problem. If it's there to make the footer stick to the bottom, you might want to look at a different implementation. On Fri, 23 Feb 2007 10:36:47 +1000, Lyn Patterson [EMAIL PROTECTED] wrote: Good morning http://www.westernwebdesign.com.au/test/newindex.html I am having more trouble with this relatively simple design than with far more complicated sites. . The problem only seems to occur in IE at res 800 x 600. At res 1024 x 768 it is fine and in Fx at 800 x 600 it is fine but at the lower res in IE the footer jumps up and some of it disappears behind other content. Have tried all sorts of fixes but obviously not the right one. Hope someone can spot the problem. Thank you Lyn Western Web Design www.westernwebdesign.com.au *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE footer problem at low resolution
Looks OK at my end. The two other things I'd remove would be:
* html, body { height: 100%;}
* html #container {height: 1%;}
The first one is wrong because there's a comma in there and you're
applying a rule that you already have on the body and the second one isn't
needed because you've already applied a height to #container.
On Fri, 23 Feb 2007 11:08:39 +1000, Lyn Patterson
[EMAIL PROTECTED] wrote:
It's margin-bottom: -40px on #container which is causing the problem.
If it's there to make the footer stick to the bottom, you might want to
look at a different implementation.
Thanks John but having removed it, the problem remains.
snip
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] hr won't turn black
Give the hr a background-color and set the border to none. On Mon, 19 Feb 2007 15:44:46 +1000, Dwain Alford [EMAIL PROTECTED] wrote: after following several threads, i have converted my site to html 4.01. what i want to do is section the parts of my page with hrs. i can't figure out why the styling of the hr does not work in ff or opera. currently i am using borders on divs to achieve this effect, but to my understanding the hr would be semantically correct to separate the page into sections rather than use borders on divs as presentation. the last two hrs on the test page separate a side note from the rest of the content. i guess i could live with the presentational effect of the border that is currently being used at the top of the page. i have not removed the borders from the css, but you can see the faint line of the hr and its initial placement. what say you of my reasoning and what would be the best practice; and if it's for the hr, how do i make it black? http://www.studiokdd.com/sandbox/alaskan-dream.html http://www.studiokdd.com/sandbox/css/kddindipix.css dwain -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] web check
Only had a quick look but what strikes me so far is that things go a bit wrong at smaller window sizes (less than 1024 x 780) - pictures on the members' pages stick out to the right and text on the member search page spills out of the boxes on the left (in Firefox Opera). On Tue, 13 Feb 2007 20:34:30 +1000, John 'Max' Maxwell [EMAIL PROTECTED] wrote: Good Morning All, Just gone live with this and have done all my valid checks etc but if anyone has a second I would really appreciate any feedback on accessibility and usability: www.devonfurnituremakers.org.uk http://www.devonfurnituremakers.org.uk/ Also - if anyone on here can provide a top to bottom accessibility report then please contact me. I am interested in a full assessment of the site pointing out what issues will affect what user groups and why and what can be done to address the issues. Thanks, Max. www.thepigfarmer.co.uk http://www.thepigfarmer.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Site Check - amplify.com.au
Just had a quick look in Firefox, but it seems to come unstuck pretty quickly when your browser window is smaller than 1024 x 780 and if you resize the text more than twice. And isn't your Google analytics code s'posed to go in the body of your page? On Mon, 12 Feb 2007 08:32:47 +1000, Scott Swabey [EMAIL PROTECTED] wrote: Hi all We have just completed a redesign/redevelopment of the www.amplify.com.auwebsite, and would appreciate any feedback, especially from Mac users. Many thanks -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] blockquote in xhtml strict
The p has to go inside the blockquote, not the other way around. You probably also want to use the cite tag instead of a span for the name of the quoted person. On Mon, 12 Feb 2007 13:46:07 +1000, Tee G. Peng [EMAIL PROTECTED] wrote: Hi, I have a block of text that uses blockquote u I came because this is one of the best.. - john doe in my markup: div img src=images/jd.jpg alt=john doe width=83 height=58 / blockquoteI came because this is one of the best.. span- john doe/span /blockquote It gives me validation error: You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include putting text directly in the body of the document without wrapping it in a container element (such as a paragraph/p) or forgetting to quote an attribute value (where characters such as % and / are common, but cannot appear without surrounding quotes). After some reading about 'blockquote' element in xhtml strict from google search, I added p tag and removed the span pblockquoteI came because this is one of the best.. span- john doe/span /blockquote /p now it gives me this: The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as p or table) inside an inline element (such as a, span, or font). What am I missing? Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Not a Good Impression
Opened OK using Opera 9.1 for me. The top nav is a bit misaligned though. On Thu, 08 Feb 2007 19:22:41 +1000, Frank Palinkas [EMAIL PROTECTED] wrote: Opened with Opera 9.10...got the same message as below: Unknown or Untested Browser/Operating System Combinationetc. Kind regards, Frank M. Palinkas Microsoft M.V.P. - Windows Help M.C.P., M.C.T., M.C.S.E., M.C.D.B.A., A+ Senior Technical Communicator Web Standards Accessibility Designer website: http://frank.helpware.net email: [EMAIL PROTECTED] | [EMAIL PROTECTED] Member: Society for Technical Communications (S.T.C.) Guild of Accessible Web Designers (G.A.W.D.S.) Web Standards Group (W.S.G.) super group trading ltd. Sandhurst, Gauteng, South Africa website: http://www.supergroup.co.za Work: +27 011 523 4931 Home: +27 011 455 5287 Fax:+27 011 455 3112 Mobile: +27 074 109 1908 -Original Message- From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Matthew Smith Sent: Thursday, 08 February, 2007 10:51 AM To: wsg@webstandardsgroup.org Subject: [WSG] Not a Good Impression Hi All Wondering if there are any SA Government folks here (or anyone else) who would like to comment on this beautiful welcome to the State Library site; for a moment, I thought I'd hit a test site or something. The offending site is at: http://www.slsa.sa.gov.au/ I have never seen anything quite like this before - and hope I don't again: Unknown or Untested Browser/Operating System Combination The Browser and/or Operating System you are using has not been tested in this site. You may still enter the site by clicking on one of the 'Enter' links below. Alternatively you can download a known browser from the browser vendor links below. If you wish to continue into the site regardless, please select a version from the choices below * Enter the text only version - should work in most browsers that support javascript (this is not a html-only version). * Enter the full graphic version (internet explorer compatibility mode). * Enter the full graphic version (mozilla compatibility mode). Compliant browsers can be found at the following links: Microsoft Internet Explorer Netscape Navigator Please contact us if you require further information or technical assistance: Email: ...visited with Firefox 2.0, Linux. -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Keyboard accessible DHMTL navigation
Hi Yara, You might like to check out a roundup I did of dropdown menus with comments made on their accessibility etc.: http://www.tyssendesign.com.au/articles/css/dropdown-low-down/ On Fri, 09 Feb 2007 11:00:13 +1000, Yara Ryan [EMAIL PROTECTED] wrote: Hi, I am have a problem trying to make a DHTML navigation keyboard accessible. http://datasearch.uts.edu.au/site_manager_sites/dab2007/demo_index.html Currently this demo page http://datasearch.uts.edu.au/site_manager_sites/dab2007/demo_index.html sort of works when trying to tab to each of the section tabs and there respective group links to make it work for Tab1 I added a onkeyup event to the tab that will make the group div visible when they let go of the tab key. Does any one know if this is really the right approach as it seems like a bit of a hack? Does anyone have any other suggestions that could be useful. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Setting input heights in Safari
Does anyone know of any workarounds for Safari not accepting height on text inputs? I've already tried setting the font-size, but to get the input to the right height, my text is going to need to be unfeasibly large. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Noobie: Padding-top, padding-bottom
It would depend what the text is. If it's a paragraph, use p, if it's a heading use hx. There's no one single tag which can be used in all situations. On Thu, 08 Feb 2007 10:40:37 +1000, Till Elsner [EMAIL PROTECTED] wrote: Reading this leads me to another question: Since font is deprecated and should not longer be used, is there any replacement for that? Any inline element that allows me to format a piece of text? While span is technically possible, in my opinion its not very semantic in this situation? Is there anything just for specially styled text? Am 08.02.2007 um 00:47 schrieb Douglas Reith: Hi All, I'm thinking this should be a quick one because I'm pretty useless with CSS... I know this will sound strange, but I don't have control over the whole HTML/CSS of the page. What I do have is control over a piece of text that is displayed which I want there to be some padding around so I did this: font style=padding: 20pxHello World/font But it only pushes the text to the left and doesn't add space to the top or the bottom. This: font style=padding-bottom: 20pxHello World/font does nothing unfortunately. Am I using this totally the wrong way? (probably!) Can I use something else to fudge the same result? P.S. Tested in FF and IE. Thanks in advance, Doug -- Douglas Reith [EMAIL PROTECTED] +61 (0)4 1042 1081 mobile skypeme_btn_small_white.gif *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Remove 3D Border Effect from Firefox Tables
Can you use CSS styles instead of HTML attributes and do: border-collapse: collapse; border: 2px solid #C00 ? On Wed, 31 Jan 2007 08:39:42 +1000, Samuel Richardson [EMAIL PROTECTED] wrote: I'm building an HTML 4 Transitional layout for Firefox using tables. Before you all run screaming or hang me from the gallows I have a reason, the page is being used as an email promotion, web based email readers such as GMail ignore float styles necessitating the use of table based layouts (oh joy! The design is very complicated and the powers above don't want to simplify it) My question is; I'm using the follow to create a 2px wide red border with padding for content table cellpadding=5 cellspacing=0 border=2 bordercolor=#cc in IE this renders perfectly fine, in Firefox it adds a 3D effect to the table border. Is there anyway of switching this off? -- Samuel Richardson 0405 472 748 - [EMAIL PROTECTED] *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Remove 3D Border Effect from Firefox Tables
If anyone can dig up a best methods article for producing HTML emails then that would be fantastic. http://www.campaignmonitor.com/blog/archives/2005/08/optimizing_css_1.html -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] div out of alignment
If you reduce the width of the window in FF you get the right column overlapping the left which suggests the maths on the columns doesn't add up which on quick look seems a bit odd because they seem to add up to less than 100%. I changed #sidebar to 39% instead of 40% though and the right column moved back into the correct position, so it might have a similar effect in IE. On Wed, 31 Jan 2007 14:39:40 +1000, Jermayn Parker [EMAIL PROTECTED] wrote: Hi all I know this is a fairly simple problem but after spending a few days designing it and nutting out all these problems, im kinder over it (if you kow what i mean) In ie the divs which hold the main content go below the side menu divs if the window size isnt big enough. I think the problem is the space or the way they are floated but im not sure http://www.germworks.net Thanks for checking and help btw if anyone has any problems with design, accesability issues etc can you also please point them out Thanks again The above message has been scanned and meets the Insurance Commission of Western Australia's Email security policy requirements for outbound transmission. This email (facsimile) and any attachments may be confidential and privileged. If you are not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this email (facsimile) is strictly prohibited. If you have received this email (facsimile) in error please contact the Insurance Commission. Web: www.icwa.wa.gov.au Phone: +61 08 9264 * *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Art and accessibility
Why are you the best state? Cos WA produces nearly 40% of Australia's export revenue - more than NSW and Victoria combined (and with only 10% of the population). -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE7 bug?
Adding #content { display: inline-block; } to your IE stylesheet should
sort it out in IE7.
Not sure I understand the IE6 question.
On Mon, 15 Jan 2007 09:53:10 +1000, Rachel May [EMAIL PROTECTED]
wrote:
Hi everyone,
I am currently working on this site:
http://brandmotto.web1.heliocell.com/clients.aspx and looks good in all
browsers cept IE (and haven't tested yet on Mac browsers).
In IE7, I get a large row of the background colour disappearing... this
is
remedied when the float:left is removed on the internal divs; however IE7
needs to be fully supported.
In IE6 all of my floated divs disappeared which I have currently
'patched'
with removing the floats until I have guidance from the client on how he
wants to support IE6.
Are these two bugs related? Any ideas on ways forward??
Thanks,
Rachel
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Setting width on the Select element of the form (problem in IE)
why does it work the way I want it to in all other browsers? :-( Because it's IE and IE often does things its own way which can be a PITA but something you just have to live with. As far as I know, there's no way around your problem in IE - you either give your select a width wide enough to cover the longest option, reduce your option text, or put up with IE truncating the options. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Setting width on the Select element of the form (problem in IE)
Did you not read my post about there not being anything you can do to this
in IE?
On Mon, 15 Jan 2007 15:35:40 +1000, Bojana Lalic
[EMAIL PROTECTED] wrote:
I already have set the width on the option. The thing is, that the
selected value (which also appears when no dropdown items are showing)
is a lot smaller than some of the options. Due to a limited amount of
space on the page I've had to fix the select width...
-Original Message-
From: listdad@webstandardsgroup.org
[mailto:[EMAIL PROTECTED] On Behalf Of Samuel Richardson
Sent: Monday, January 15, 2007 3:56 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Setting width on the Select element of the form
(problem in IE)
Why are you setting the width on the option and not the select box?
-Original Message-
From: listdad@webstandardsgroup.org
[mailto:[EMAIL PROTECTED]
On Behalf Of Bojana Lalic
Sent: Monday, 15 January 2007 4:17 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Setting width on the Select element of the form
(problem
in IE)
This is ridiculous!
I just tried setting the width for the option
#x select option{
width: 500px;
}
And it works in FF but not IE :(
-Original Message-
From: listdad@webstandardsgroup.org
[mailto:[EMAIL PROTECTED] On Behalf Of John Faulds
Sent: Monday, January 15, 2007 2:58 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Setting width on the Select element of the form
(problem in IE)
why does it work the way I want it to in all other browsers? :-(
Because it's IE and IE often does things its own way which can be a PITA
but something you just have to live with. As far as I know, there's no
way
around your problem in IE - you either give your select a width wide
enough to cover the longest option, reduce your option text, or put up
with IE truncating the options.
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Images enlarging themselves
It's because you've given those images a width of 100px in your CSS. If they're narrower than that, they're going to come out distorted. On Fri, 12 Jan 2007 13:05:33 +1000, Lyn Patterson [EMAIL PROTECTED] wrote: www.westernwebdesign.com.au/test/flora3.html -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] input type='image'
Also more on button / here: http://www.digital-web.com/articles/push_my_button/ And a bit more on styling buttons (although some of it deals with inputs too): http://www.tyssendesign.com.au/articles/css/styling-form-buttons/ -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Multiple Suckerfish dropdown mayhem
I don't think you can't attach two functions with window.onload, so effectively the 2nd one gets ignored. You could add an event listener function to your js or go for something like the whatever:hover - http://www.xs4all.nl/~peterned/csshover.html On Tue, 19 Dec 2006 20:10:27 +1000, Nick Gleitzman [EMAIL PROTECTED] wrote: Hi folks I wonder if any of the javascript gurus out there can help a cut'n'paste non-programmer... disclaimerI didn't design this site. The client's inhouse designer did. I don't like the dropdowns; they get tedious. But dropdowns she wants, and dropdowns she gets./disclaimer I have a site build in progress [1] and I'm using an adaptation of Patrick Griffiths and Dan Webb's Son of Suckerfish dropdowns. I even have two separate nested lists on each page - and all works as requested in 'good' browsers; I'm actually pretty happy with it. Except, of course, when I start testing in Exploder. Fixed all the layout issues, but IEWin [2] refuses to display the second dropdown - which should appear on :hover of the text links at right. I assume this is a bug in my clumsy attempt to duplicate the javascript [3] but I don't know enough to find it. Another issue with these dropdaowns is a really unsightly flashing on and off of the graphics of the main menu as the links are :hovered over. My virtual PC setup gives slower than normal rendering of web pages, but even with a real PC I would imagine there's a flash of white. Any clues? The relevant rules for the menus in my css file [4] start at line 66, with the comment /* navigation - top level */. [1] http://www.omnivision.com.au/fenton2/index.htm [2] IE6/Win XP Pro running on Virtual PC 7 on OS X 10.3.9 - slow as a wet weekend, but it works... [3] http://www.omnivision.com.au/fenton2/inc/sfhover.js [4] http://www.omnivision.com.au/fenton2/inc/home.css disclaimer I didn't design this site. The client's inhouse designer did. I don't like the dropdowns; they get tedious with constant use. But dropdowns she wants, and dropdowns she gets. Also: This. Is. A. Work. In. Progress. Please resist the temptation to comment on accessibilty (or the lack thereof); I know. The markup is not finished yet. If you delve into the site and marvel at the multiple stylesheets, that's how I work. They'll get combined and condensed later. And the underscore hacks in the css files are a quick first check and fix for IEWin; they'll be moved to their own files and delivered vis CCs. /disclaimer Thanks for your time. Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Minlo Technologies | Sri Lanka
One always runs the risk a power user will break a page when images are used (in part) to lay it out. Otherwise, very nice. Is a power user someone who resizes the text? To that end, you might want to consider setting the width of your h2 in ems so that when the text is resized, the space it occupies increases with the text. Also, when using image rollovers you might consider putting both states into the same image and moving it with background-position on :hover so there's no lag when you first rollover the image. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Minlo Technologies | Sri Lanka
One always runs the risk a power user will break a page when images are used (in part) to lay it out. Otherwise, very nice. Is a power user someone who resizes the text? To that end, you might want to consider setting the width of your h2 in ems so that when the text is resized, the space it occupies increases with the text. Also, when using image rollovers you might consider putting both states into the same image and moving it with background-position on :hover so there's no lag when you first rollover the image. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE Background Position Oops
I think you need to give IE something on a:hover as well as a:hover span otherwise the hover won't be triggered. On Tue, 12 Dec 2006 08:55:38 +1000, Joseph R. B. Taylor [EMAIL PROTECTED] wrote: Hey gang, I have a little CSS issue I can't seem to solve. To describe it simply: I'm using the old use an empty span inside the element for my image replacement technique along side sliding a background image behind my link for hover state effects. All works well in the browsers you'd expect it to, but of course IE6 has an issue. For some reason its leaves the background image in the hover statehmmm...and doesn't move it back to its predefined position! Here's the url: http://akolsonlimo.com/about.php If anyone is aware of this, (or if I'm just screwed up somehow) and knows what causes it please let me know thanks! -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] display problem with IE 5.5
It is picking up the conditional comment because you can see the red
border. Not sure why cos I'm sure it worked like this yesterday, but it
seems like
#news_left p { margin-leftt: 160px; }
should be
#news_left p { margin-right: 160px; /* or some other value */ }
On Wed, 06 Dec 2006 10:59:56 +1000, Bojana Lalic
[EMAIL PROTECTED] wrote:
Hi John
IE5.5 doesn't seem to pick up the conditional comments. What have I done
wrong?
http://pre2005.flexiblelearning.net.au/temporary.html
Bojana
-Original Message-
From: listdad@webstandardsgroup.org
[mailto:[EMAIL PROTECTED] On Behalf Of Joseph R. B. Taylor
Sent: Wednesday, December 06, 2006 2:44 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] display problem with IE 5.5
On the 'position:absolute;' problem, make sure you are nesting it in
something with 'position:relative;' to give it coordinates to work from
beside the top of the page which is the default behavior.
John Faulds wrote:
I actually meant to use conditional comments to serve IE5.5 different
rules from everything else. So put back whatever you had for the page
to start with and then add something like this below all your other
styles:
!--[if lt IE 6]
style type=text/css media=screen
div#wrapper {
position: relative;
float: none;
width: auto;
}
#news_left {
margin-right: 220px;
}
#news_left p {
margin-left: 160px;
}
#news_right {
position: absolute;
right: 0;
top: 70px;
width: 220px;
margin: 0;
padding: 0 0 0 5px;
}
/style
![endif]--
On Tue, 05 Dec 2006 13:09:42 +1000, Bojana Lalic
[EMAIL PROTECTED] wrote:
snip
IE
snip
the
snip
attached
snip
#news_left
snip
snip
private
snip
disclose
snip
not
snip
transmitted
snip
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Gap in IE
You've set the height of #header, #text and #logo to 91px but you've also given #logo margin-top and padding-top of 3px which actually makes it 97px high. On Wed, 06 Dec 2006 15:51:34 +1000, Jermayn Parker [EMAIL PROTECTED] wrote: No that didnt work I tried adding it to all the divs that have images as well and it didnt work either On 12/6/06, John Faulds [EMAIL PROTECTED] wrote: Only guessing cos I can't see the images when viewing the pages locally but try adding display: block to the images in #logo. On Wed, 06 Dec 2006 15:14:28 +1000, Jermayn Parker [EMAIL PROTECTED] wrote: *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] display problem with IE 5.5
That has to be the biggest list of stylesheets I've ever seen attached to one page! Is there really a need to have that many? As far as the problem goes, for IE5.5 you might have to give #news_left a margin-right and then use position: absolute on #news_right. On Tue, 05 Dec 2006 10:58:09 +1000, Bojana Lalic [EMAIL PROTECTED] wrote: Hi all I've got a three column layout (navigation + main content + right column). The navigation and the right column are fixed and the main content (middle) is liquid. It all looks fine in firefox, IE 6 and most all other browsers except for IE 5.5. And I really need to get it to display properly in IE5.5 :-( How do I fix the display problem in IE 5.5? Here is the page: http://pre2005.flexiblelearning.net.au/temporary.html And this is what it looks like in ie 5.5: http://pre2005.flexiblelearning.net.au/ie5.5.gif Regards Bojana _ IMPORTANT: This e-mail, including any attachments, may contain private or confidential information. If you think you may not be the intended recipient, or if you have received this e-mail in error, please contact the sender immediately and delete all copies of this e-mail. If you are not the intended recipient, you must not reproduce any part of this e-mail or disclose its contents to any other party. This email represents the views of the individual sender, which do not necessarily reflect those of education.au limited except where the sender expressly states otherwise. It is your responsibility to scan this email and any files transmitted with it for viruses or any other defects. education.au limited will not be liable for any loss, damage or consequence caused directly or indirectly by this email. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] display problem with IE 5.5
I actually meant to use conditional comments to serve IE5.5 different
rules from everything else. So put back whatever you had for the page to
start with and then add something like this below all your other styles:
!--[if lt IE 6]
style type=text/css media=screen
div#wrapper {
position: relative;
float: none;
width: auto;
}
#news_left {
margin-right: 220px;
}
#news_left p {
margin-left: 160px;
}
#news_right {
position: absolute;
right: 0;
top: 70px;
width: 220px;
margin: 0;
padding: 0 0 0 5px;
}
/style
![endif]--
On Tue, 05 Dec 2006 13:09:42 +1000, Bojana Lalic
[EMAIL PROTECTED] wrote:
Hi John
Setting the news_right position to absolute hides the right column in IE
5.5 altogether and stuffs up the layout in other browsers. Setting the
right margin on news_left didn't do much either :(
This is what it now looks like:
http://pre2005.flexiblelearning.net.au/temporary.html
Any help would be greatly appreciated.
In regards to the stylesheets list, I'm currently in the process of
cleaning it up ;)
Cheers
Bojana
-Original Message-
From: listdad@webstandardsgroup.org
[mailto:[EMAIL PROTECTED] On Behalf Of John Faulds
Sent: Tuesday, December 05, 2006 12:01 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] display problem with IE 5.5
That has to be the biggest list of stylesheets I've ever seen attached
to
one page! Is there really a need to have that many?
As far as the problem goes, for IE5.5 you might have to give #news_left
a
margin-right and then use position: absolute on #news_right.
On Tue, 05 Dec 2006 10:58:09 +1000, Bojana Lalic
[EMAIL PROTECTED] wrote:
Hi all
I've got a three column layout (navigation + main content + right
column). The navigation and the right column are fixed and the main
content (middle) is liquid. It all looks fine in firefox, IE 6 and
most
all other browsers except for IE 5.5. And I really need to get it to
display properly in IE5.5 :-(
How do I fix the display problem in IE 5.5?
Here is the page:
http://pre2005.flexiblelearning.net.au/temporary.html
And this is what it looks like in ie 5.5:
http://pre2005.flexiblelearning.net.au/ie5.5.gif
Regards
Bojana
_
IMPORTANT: This e-mail, including any attachments, may contain private
or confidential information.
If you think you may not be the intended recipient, or if you have
received this e-mail in error,
please contact the sender immediately and delete all copies of this
e-mail. If you are not the intended
recipient, you must not reproduce any part of this e-mail or disclose
its contents to any other party.
This email represents the views of the individual sender, which do not
necessarily reflect those of
education.au limited except where the sender expressly states
otherwise.
It is your responsibility to scan this email and any files transmitted
with it for viruses or any other
defects.
education.au limited will not be liable for any loss, damage or
consequence caused directly or indirectly by this email.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Trouble with forms in CSS
Would need to see the associated CSS but why are you not using a label for 'Details'? On Sat, 02 Dec 2006 16:58:57 +1000, Al Kendall [EMAIL PROTECTED] wrote: Hi, I'm having troubles with my some inline text not lining up at the right height after a label in my form. See pic attached. The sample code is below .. label for=fabEx-Kiwi: /label input name=tradegroup id=fab type=radio value=FAB tabindex=28 / br / label for=otherOther: /label input name=tradegroup id=other type=radio value=OTHER tabindex=29 / spanDetails: /span input name=otherdetails id=otherdetails type=text tabindex=30 / pWhat was the dates of your course?/p label for=startdateStart Date: /label input name=startdate id=startdate type=text tabindex=31 / .. -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Fieldset but no legend
I just ran a form with a xhtml strict doctype and no legend thru the W3C validator and it didn't complain..? XHTML strict won't but HTML strict will. -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] PNGs in CSS background images in IE6
Did the fixes you found include adding position: relative? On Tue, 28 Nov 2006 11:52:56 +1000, Geoff Pack [EMAIL PROTECTED] wrote: Has anyone had any success using AlphaImageLoader with PNGs in CSS background images in IE6? Any foreground links over the PNG are broken (not clickable), and the fixes I found through Google aren't doing the job. Any ideas? thanks, Geoff == The information contained in this email and any attachment is confidential and may contain legally privileged or copyright material. It is intended only for the use of the addressee(s). If you are not the intended recipient of this email, you are not permitted to disseminate, distribute or copy this email or any attachments. If you have received this message in error, please notify the sender immediately and delete this email from your system. The ABC does not represent or warrant that this transmission is secure or virus free. Before opening any attachment you should check for viruses. The ABC's liability is limited to resupplying any email and attachments == *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] positioning and rollovers
For your first problem, make the anchors display: block, not display: inherit. I don't really understand the 2nd problem, sorry. On Tue, 28 Nov 2006 12:19:02 +1000, Teresa Carroll [EMAIL PROTECTED] wrote: Hello, I have 2 questions regarding a Web site I am developing. I am using CSS to provide a rollover. I am creating the Web site on a Macintosh and using fire Fox as a current browser. I just realized that the Internet Explorer does not recognize the rollover technique for this particular site. I was wondering if someone knows why? http:// www.markgroaningstudio.com/ The second question has to do with the positioning of the text and pictures. I am currently using a percentage to line up the text and pictures. But several people have noticed that the text overlaps the photo. What is the best way to prevent that? http:// www.markgroaningstudio.com/paintings.html Thank you very much. I appreciate all the support and suggestions in advance., all the best, Teresa *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] what's causing ie7 to ignore the valid div rules?
Is there s'posed to be a link with this? On Wed, 22 Nov 2006 16:37:25 +1000, Dwain Alford [EMAIL PROTECTED] wrote: in ie7 the valid div hangs over the container div. all other browsers that i can check render the div inside the container with a 1em margin. what do i need to do to fix this so ie7 will render properly? dwain *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Content jump in FF on textresize.
A bit too much position: absolute/relative going on in there I think. You'd be better floating your infobox left and giving it a width and then just give #midte a margin-left wider than infobox (no width needed). You also don't need to use position: relative on #top. Just use margins to place it where you want it. On Mon, 20 Nov 2006 10:29:26 +1000, denAnden [EMAIL PROTECTED] wrote: Hallo All, On the following page I have encountered a strange thing in FF (1.5.0.8 / XP) On text-resize-up, the div#midte jumps upwards; it jumps to the place opera/safari displays the content. on down scaling it does not happen. Page: http://forandre.dk/madministeriet/ Css: http://forandre.dk/madministeriet/stil/grund.css Screenshot: http://forandre.dk/madministeriet/screenshot.jpg Any suggestions on how to get the div to display itself the same place - also when resizing - in opera and firefox, will be much appreciated. Any general comment on the page will be equally valued. With regards, Jes. www.denanden.dk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Hardware/OS setup recommendations
Go to http://www.browsercam.com - For about $40.00 a month you can do unlimited testing in most hardware/browser setups. I'm already a member of an annual group purchase. ;) -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Hardware/OS setup recommendations
This may be a little off topic but it relates to testing websites so... I'm thinking about upgrading and I'd like recommendations for what would be the best configuration for a freelancer working from home with a limited amount of space and resources. I'm after something that provides maximum flexibility when it comes to testing in OSes, browsers, screen resolutions. Am I able to do this with just one machine, e.g. a MacBook Pro running Parallels or a PC running some VM software or do I need to have separate machines? Likewise with monitors: do I need to have more than one or will one suffice as long as it's sufficiently large enough? Thanks John -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] 1 pixel difference in firefox and IE 7
IE will often round values differently from other browsers so in cases where you absolutely have to have things line up, I use conditional comments to give IE a different value whether it be width, margin, padding, position etc. On Thu, 16 Nov 2006 05:08:48 +1000, Martyn [EMAIL PROTECTED] wrote: Hi all, I am trying to line up an image I have placed in a div to match a repeating background image I have placed in a wrapper div. The problem seems to be that there is a 1px difference between firefox and IE 7. I had this issue about two weeks ago but can not for the live of me remember how I resolved it. Any ideas about this? Kind Regards Martyn http://www.portwebsolutions.co.uk Web design and Development Tel: 01304 332560 Mob: 07841509409 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Internet Explorer strikes again...
Unless I'm missing something (I looked in FF as well), the hr appears to
be just a solid colour so I wouldn't use a hr, I'd just use a coloured
border.
I wouldn't use a PNG for your header graphic either. It looks like a GIF
would suffice perfectly well.
Changing height: 100% to min-height: 100% on body and #all stops the
content being cut off in IE7 and for the extra space, #footer shouldn't be
included in this:
#features, #sidebar, #content {
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
It's only the columns that should be.
On Thu, 16 Nov 2006 10:48:08 +1000, Michael Cordover
[EMAIL PROTECTED] wrote:
Hi list,
Linky: http://fc.mjec.net/ (one page only, static; stolen from
localhost development with wget -m -k)
Issues, both IE related:
1. In IE7, massive amounts of whitespace at the bottom for no apparent
reason
2. Still can't get the hr background images to work transparently (png
alpha issues - yay!) in IE7, and locally they still show up as black
bars in IE7, which might indicate problems with the files themselves?
Advice appreciated.
That page may be updated when I have time to do more than wget and ftp
mput *.
Many thanks,
Michael
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Internet Explorer strikes again...
You can either play around with MS filters to get IE to play ball or if the hrs are always going to appear over a white bg (ie no transparency required), just re-export them as 24-bit PNGs without any transparency. On Thu, 16 Nov 2006 13:03:09 +1000, Michael Cordover [EMAIL PROTECTED] wrote: On 11/16/06, John Faulds [EMAIL PROTECTED] wrote: Unless I'm missing something (I looked in FF as well), the hr appears to be just a solid colour so I wouldn't use a hr, I'd just use a coloured border. Yeah, this is my bad; for some reason hr.png didn't get uploaded (I blame wget failing to get background images, but perhaps not). If you have another look you'll notice the issue with black bar hr/ in msie and nice gradient purple in fx. min-height trick fixed all my problems that side though; thanks a lot! It's times like these that make me wish I worked live, or at least had internet access on my development computer... Thanks, Michael. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS resources for Graphic designers?
I don't know if you'll find any of these useful: http://www.digital-web.com/articles/designing_for_the_web/ http://www.markboulton.co.uk/index.php/journal/C107/ On Tue, 14 Nov 2006 12:15:44 +1000, Susie Gardner-Brown [EMAIL PROTECTED] wrote: I¹ll have a look at tht. But there¹s no way the university would pay to get something done outside when we already have the staff here! It¹s maybe a matter of Œcontrol¹. The GDs are the ones who decide the graphic layout, colours, fonts, heading levels etc. And I don¹t think they want to relinquish control over how a site is laid out, so I believe they want to create the styles for that. But of course they won¹t see the big, container level picture, or why you should use this style/div and not that one, if you know what I mean. I can do it I have been doing it for a year or more. But they want/need to know more about CSS so that they can design sites that work well using CSS rather than heavily graphic-based sites ... For example, any navigation they create always consists of graphic rollover images, using non-standard fonts. If we try and encourage them towards list-based CSS navigation, they need to see that even if they give up (in some cases) on specifying fonts, they can produce image-based backgrounds for rollovers. I think it¹s partly about developing a different style of graphic design for the web from the old table-based designs we used to use. - susie On 14/11/06 11:50 AM, Nick Lazar [EMAIL PROTECTED] wrote: snip A really useful resource, particularly for small companies that may have limited staff numbers, is http://psd2html.com. These guys do a very good job of converting a PSD file to standards compliant CSS/XHTML. I've used them a couple of times, and have been very pleased with the result. Susie, I mention this in response to your query, as it may be worth your while getting a couple of jobs done by these people, and then going through the resulting code, as it will certainly show you what you need to be producing from your PSD files. Hope that helps, Regards, Nick. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS resources for Graphic designers?
If I was in QLD I would help out. I am in QLD so may be able to help you out further if you need it but I think it's hard to deal with generalities. It seems you're saying the code the GDs turn out is not up to standard. But whose standard? Is it yours or does the university have a clear set of guidelines with regards the coding of its sites? If the university has guidelines then I'd think they should be your first point of reference. It's a bit hard to give advice as to where to iron out the bumps when we don't really know who's responsible for doing what. It seems to me like it would be easier to provide evidence to back up the standards-way of doing things for specific examples. For instance, with the point you made about images in navigation menus, we could point to tutorials on accessible image replacement etc. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS resources for Graphic designers?
For that I would encourage them to visit the CSS Zen Garden I'd be wary of recommending the Zen Garden for the fact that a lot of the designs don't represent best practice CSS coding. Yes they're great examples of how you can break boundaries, but you'll also find examples where a lot of the mark-up has simply been set to display: none in favour of a huge graphic that contains all the text. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] different margin in ie from firefox
Two problems: IE's double margin and 3px gap bugs. For the first, add display: inline to #left_pos and for the second you can give IE only a margin-left of 414px for #right_pos. On Tue, 07 Nov 2006 09:12:16 +1000, Robin @ Xplore.net [EMAIL PROTECTED] wrote: I have a small problem with my margin which is not rendering the same in ie as it is in firefox and netscape, could anyone see what the problem might be please? http://www.starfoods.co.nz/test/testsplash.htm cheers for your help Robin. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] different margin in ie from firefox
No, I didn't mean change the left margin to 414 for *all* browsers; I
meant only for IE. You'd use an IE-only filter like
* html #right_pos { margin-left: 414px; }
or use IE conditional comments to make sure only IE sees that rule.
(By the way, you don't need to start a new subject for something related
to one you already had going.)
On Tue, 07 Nov 2006 12:16:50 +1000, Robin @ Xplore.net [EMAIL PROTECTED]
wrote:
Hello,
I have a small problem with my margin which is not rendering the same in
ie
as it is in firefox and netscape, could anyone please have a quick look
and
suggest to me what the problem might be.
It's the left hand column which is not sitting beneath the white area as
it
should.
http://www.starfoods.co.nz/test/testsplash.htm
cheers for your help
Robin.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] IE Issues (margin/padding)
For your home page, this in base.css:
body { text-align: center; margin: 0 auto; width: 770px;}
seems to be conflicting with what you're trying to do in index.css.
On Fri, 03 Nov 2006 19:59:31 +1000, Rahul Gonsalves
[EMAIL PROTECTED] wrote:
Hi All,
http://rahulgonsalves.com/v2/
I have another version here, with the columns background shown, to help
you see how out of alignment it is in IE:
http://rahulgonsalves.com/v2/columns.html
The page displays as intended in Opera and Firefox 2, but in IE is a
*mess*. I don't quite know where to start, I wonder whether anybody has
any solutions?
Specific problems:
1. Why is the header (Rahul Gonsalves...) so much lower in IE? Fix?
2. The h2s are all out of alignment. Does this have to do with the
faulty box-model?
3. Why is the image so far out to the left? Fix?
4. How does one fix the paragraph alignment?
Thanks in advance,
- Rahul.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Background-image misalignment (FAO Robin @ Xplore.net)
Add background-position: left bottom to those images. On Fri, 03 Nov 2006 12:55:16 +1000, Robin @ Xplore.net [EMAIL PROTECTED] wrote: Hello, Could anyone please tell me why my background image is displaying below my background image in ie and not in firefox and how can I fix it in ie please? http://training.xtools.co.nz/hbyt/index.htm I have validated both css and html. Thanks in advance Robin -Original Message- From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Jan Brasna Sent: Friday, 3 November 2006 3:09 p.m. To: wsg@webstandardsgroup.org Subject: Re: [WSG] Articles/reasearch/experience of screen readers I would love any links to articles/archived polemic/research studies/the appropriate list... If anybody here has actual experience of a screen reader, I would be overjoyed to hear from them. Joe Clark or James Edwards aka Brothercake are practicing screen reader testing with various some-technology-enabled sites to test AT behaviour.[1][2] (Plus there's one more on this from Bruce Lawson.[3]) If you're looking for a dedicated forum, you could try AccessifyForum.com [4] ... BTW I use VoiceOver on MacOS X pretty often. The same goes for inverted color scheme or zoomed screen - my eyes simply hurt after a whole day stuck to a display... The issue I see nowadays is where the assistive technology doesn't quite catch up with the recent best-practice (sorry to lean it all towards JS/DOM...). One thing is having an accessible content, however I really believe the AT should be built in the system in such way that it could really handle all the information a sighted user could get, and process it for the screen reader. Derek, I'm talking about non-linear DOM changes or generally event announcement. I think we quite agreed on that with Tomas Caspers and Brothercake. BTW a half year ago I commented on this topic under Garrett's article[5], and maybe made the same mistake of mentioning turning JS off as Derek did some time ago if I'm not mistaken. [1]http://joeclark.org/access/research/ice/iceweb2006-notes.html [2]http://www.sitepoint.com/print/ajax-screenreaders-work [3]http://www.brucelawson.co.uk/index.php/2006/ajax-accessibility-and-assis tive-technology/ [4]http://www.accessifyforum.com/ [5]http://www.garrettdimon.com/archives/front-end-architecture-ajax-dom-scr ipting -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] background overlapping
Try removing the height from #links. On Fri, 03 Nov 2006 13:17:41 +1000, Germ [EMAIL PROTECTED] wrote: Hi Im designing a website for my university design exhibition and it looks fine in IE (6 i think it is) but in firefox the bunch of links overlap the white content about 5 pixels and it just looks a bit tacky. as far as i can see the code looks ok. http://curtinmovingon.com/Exhibition/?p=9 http://www.curtinmovingon.com/Style2.css Im thinking the problem is the header bit sitting on top of the content divs. I tried placing a clear: both on the next div (container) but it didnt help... Any help would be great. btw if you notice anything else, please let me know Thanks everyone -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE 7 freezes liquid, jello
It would be great though if someone who has both IE7 and Opera could tell us how the Zooms are similar or different. IE7 zooms your page right off the right edge of the screen creating a horizontal scrollbar. :/ Opera confines its zoom to within the window. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Forget about Opera and Mac (and Windows Vista) ??
Not if you sign up to a group purchase: http://www.fundable.org/groupactions/BrowserCamGroup On Thu, 26 Oct 2006 16:47:28 +1000, Taco Fleur [EMAIL PROTECTED] wrote: PS: is there anything else out there other than http://www.browsercam.com They seem to be pretty pricy *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible Multi-Column List
http://www.christianmontoya.com/2006/09/18/revisiting-image-rollovers/ If you're talking about the Ryan Rollovers that you link to, it looks very similar to the Gilder-Levin method which is mentioned at http://www.mezzoblue.com/tests/revised-image-replacement/ (dated 2004) and was updated to become the Gilder Levin Ryznar Jacoubsen method - http://www.ryznardesign.com/web_coding/image_replacement/ -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Forget about Opera and Mac (and Windows Vista) ??
Should I be thinking about fixing up the issues in Opera and on the Mac or just say tough luck! Only you can answer that question. It's your business, you need to determine how many visitors/potential clients you have that use Macs and whether you're likely to lose them by not fixing the problems. I have no experience with IE7, is it maybe still in Beta IE7 became an official release last week and will be installed via automatic download some time in November. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] image disappears sporadically on mouse over - site check
Also, any other feedback in relation to the site would be much appreciated, eg. mark-up, semantics etc. (as long as it's related to the topic of this list). If you mean your Pacific Fox website, you might want to take a look at it in Opera 9 (8.5 appears to be OK). -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE6 - IE7
I agree, though, that a virtual machine is the way to go for those who need multiple installs, especially given that Virtual PC for Windows is now a free download. Does using Microsoft's Virtual PC make any difference as to the legality of running the same copy of Windows on different virtual drives as was mentioned earlier in this discussion? -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Sticky footer kinda sorta
A couple of others: http://www.themaninblue.com/writing/perspective/2005/08/29/ http://garyblue.port5.com/webdev/footertest.html On Thu, 19 Oct 2006 05:54:19 +1000, Matthew Pennell [EMAIL PROTECTED] wrote: On 10/18/06, Tom Livingston [EMAIL PROTECTED] wrote: I am in need of a footer that sticks to the bottom of the viewport, but when content runs deep, the footer is pushed down accordingly. http://www.sitepoint.com/forums/showthread.php?t=143801 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE6 - IE7
On Thu, 19 Oct 2006 13:52:17 +1000, [EMAIL PROTECTED] wrote: Rahul Gonsalves wrote: I will not be allowing IE7 to be installed on my main computer, until most of the bugs have been worked out, and a couple of security updates have been applied :-). how do you go about doing this? Do you mean how to prevent IE7 being installed via automatic updates? http://www.microsoft.com/downloads/details.aspx?FamilyId=4516A6F7-5D44-482B-9DBD-869B4A90159Cdisplaylang=en -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Entity Name vs Entity Number
http://lachy.id.au/log/2005/10/char-refs Looks like that article's gone missing. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] set height versus height set to auto
IE = 6 will expand heights to contain content. Other browsers won't. The
reason why everything's getting messed up in FF Opera is because of the
set heights. Editing your CSS in FF, I made these changes and it looked OK:
#middlecontent{
}
#middlelefttext{
float:left;
width:298px;
color:rgb(0,0,0);
font:10pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
padding:0px 5px 0px 5px;
background:rgb(255,255,255)
}
#middlerightimage{
margin-left: 300px;
background:rgb(255,255,255)
}
Even on your index page, you probably don't need to set a height; just
make sure whatever content follows after the image is cleared properly as
the text next to the image is floated. (At default text size, the image is
longer than the text anyway, so the the need to clear the following
content won't appear as apparent until the content or text size is
increased and becomes longer than the image.)
On Wed, 18 Oct 2006 12:12:03 +1000, [EMAIL PROTECTED] wrote:
I'm still plugging along learning but I'm once again
stumped. I've been attempting to take a Photoshop design image that was
sliced and diced and make it into a tableless web page. I'm trying to
get this page to look as close to the original design image (
http://www.designbyatfb.com/temp-images/ut-sample-lrg-2.jpg warning
image is 214 kb) as possible. It is not fluid, it is not perfect.
I'm doing this for myself, just using misc. stuff from a acquaintances
site. So this is not an actual commercial site. This is a practice site
for my own sake.
The index page works and acts exactly as I imagined it should in FF and
IE.
css is located here:
http://www.designbyatfb.com/temp-images/ut-web/css/main-style.css
index page is located here:
http://www.designbyatfb.com/temp-images/ut-web/index.html
}
#middlecontent{
width:auto;
height:348px;
position:relative
}
#middlelefttext{
position:relative;
float:left;
clear:right;
height:348px;
width:298px;
color:rgb(0,0,0);
font:10pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
padding:0px 5px 0px 5px;
background:rgb(255,255,255)
}
#middlerightimage{
position:relative;
right:0px;
top:0px;
float:right;
clear:right;
height:348px;
width:auto;
background:rgb(255,255,255)
}
However, to further confuse me, this page
http://www.designbyatfb.com/temp-images/ut-web/gucci.html, whose
more-style.css (
http://www.designbyatfb.com/temp-images/ut-web/css/more-style.css ) is
an exact replica of main-style, except I've changed the fixed heights to
auto: This was my attempt to make the page expandable in height for that
content area
}#middlecontent{width:auto;height:auto;position:relative}#middlelefttext{position:relative;float:left;clear:right;height:auto;width:298px;color:rgb(0,0,0);font:10pt
Trebuchet MS,Arial,Helvetica,sans-serif;text-align:right;padding:0px
5px 0px
5px;background:rgb(255,255,255)}#middlerightimage{position:relative;right:0px;top:0px;float:right;clear:right;height:auto;width:auto;background:rgb(255,255,255)}The
big challenge is the next page, or the Gucci page. This page works great
in IE it adds white space under the purse image, However this page
completely falls apart in FF. I am thinking it is the height in the
following portion of the main-style.css . I've used font sizes in pt, I
realize that is not a very good or accessible practice. I've questions
too about link titles, are they necessary for accessibility? I've not
run through any accessibilty tests so far. Thanks Sharron
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] IE6 - IE7
With the public release of IE7 nearly on us I'm just wondering whether it's better to download the fix to stop IE7 installing via automatic update and continue to use IE7 as a standalone, or let IE7 replace IE6 and then install a standalone for IE6. What would be the pros and cons of each method? -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE6 - IE7
I believe, that when testing, it is best to simulate the native conditions under which a browser would be used. Yeah, good point. PS: Thanks for your submit button skinning tutorial! Using it right now. No worries! :) -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] set height versus height set to auto
You're being afflicted by IE's 3 pixel gap and because you've got images
in the left and right columns that don't give you much leeway space-wise,
you may have to float the images. You'll then need to add clear: both to
whatever follows. So:
#middlelefttext{
float:left;
width:298px;
color:rgb(0,0,0);
font:10pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
padding:0px 5px 0px 5px;
background:rgb(255,255,255)
}
#middlerightimage{
margin-left: 298px;
background:rgb(255,255,255)
}
* html #middlerightimage img { float: right; } /* IE only - better
included via IE conditional comments */
#bottom-brwn-bar{
clear: both;
height:42px;
font:7pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
color:rgb(117,86,76);
line-height:14pt;
background:url(css-images/bottom-brwn-bar.gif)
}
On Wed, 18 Oct 2006 14:06:35 +1000, [EMAIL PROTECTED] wrote:
Samuel, You snuck out an response as I was trying to organize my
thoughts and text. I've not had oppourtunity to digest your response
yet. I started with a tabled page created when the images was sliced up
and rendered into a html page via image ready. So in essense, I started
building the css from the top table row by turning it into a div. Why is
everything set to relative? I don't know. Why did I build it this way?
Well, cause I wanted to see if I could do it at allfrom
image to css. I'm not a expert and have to learn one div at a time.
I will re read your reply and see what I can do as you suggested. Thank
you too for your response.
Thank you for the help! John,
I think I am making my, thus your confusion worse. I apologize.
index page http://www.designbyatfb.com/temp-images/ut-web/index.html
uses main-style.css with fixed heights for the middle area css:
http://www.designbyatfb.com/temp-images/ut-web/css/main-style.css This
page renders exactly right in IE 6 and FF 1.5.0.7
gucci.html http://www.designbyatfb.com/temp-images/ut-web/gucci.html
uses the same main-style.css. This page renders almost right ( except
for a small space under last image on the right side #middlerightimage
in IE the whole page falls apart in FF 1.0.5.7 (as I already know and
stated this css is using set height, which I know is wrong here for this
page).
gucci2.html http://www.designbyatfb.com/temp-images/ut-web/gucci2.html
uses my initial more-style.css
http://www.designbyatfb.com/temp-images/ut-web/css/more-style.css which
is almost identicle to the first css, all I've changed is the set height
to auto; for that middle area . This page is completely off in FF
1.0.5.7 and IE 6.
gucci3.html http://www.designbyatfb.com/temp-images/ut-web/gucci3.html
uses more-style3.css
http://www.designbyatfb.com/temp-images/ut-web/css/more-style3.css ,
with your suggested css changes. This page renders almost perfect in FF
1.0.5.7 with a small white space to the right of the images. This page
in IE 6 is dropping the right image div and cutting off the right side
of the left text div.
- Original Message -
From: John Faulds [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Tuesday, October 17, 2006 9:41 PM
Subject: Re: [WSG] set height versus height set to auto
IE = 6 will expand heights to contain content. Other browsers won't. The
reason why everything's getting messed up in FF Opera is because of the
set heights. Editing your CSS in FF, I made these changes and it looked
OK:
#middlecontent{
}
#middlelefttext{
float:left;
width:298px;
color:rgb(0,0,0);
font:10pt Trebuchet MS,Arial,Helvetica,sans-serif;
text-align:right;
padding:0px 5px 0px 5px;
background:rgb(255,255,255)
}
#middlerightimage{
margin-left: 300px;
background:rgb(255,255,255)
}
Even on your index page, you probably don't need to set a height; just
make sure whatever content follows after the image is cleared properly as
the text next to the image is floated. (At default text size, the image
is
longer than the text anyway, so the the need to clear the following
content won't appear as apparent until the content or text size is
increased and becomes longer than the image.)
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] different spacing across browser p in li
Seems to be the inline clear:left on your form which is causing the trouble in IE. As for using other block level elements within a list item, I don't see the need for them unless your list items contains more than one line of content. If you want to differentiate between two paragraphs or if the content is quite long, then definitely use p tags, but in your case your content is only 2-3 words long. Lists are perfectly valid containers of content by themselves and I think they're fine in your case. On Mon, 16 Oct 2006 20:51:21 +1000, Taco Fleur [EMAIL PROTECTED] wrote: I was wondering if someone knew why there is a larger spacing above the form in Internet Explorer? http://www.clickfind.com.au/advertiser/register.cfm in Firefox it looks ok, the ol id=lth is right above the form Also wondering if someone could answer the question someone else asked on this list in regards to a p tag in a li tag, is it needed? To me it is a paragraph, but I could be wrong, do you not use a p tag within a list item? Kind regards, Taco Fleur - watch our new video online! http://pacificfox.tv/ Pacific FoxT free call 1800 032 982 or mobile 0421 851 786 - fax 07 3414 6464, international +61 7 3325 5103 www.pacificfox.com.au http://www.pacificfox.com.au/?source=email an industry leader with commercial experience since 1994 . our services: * online, print, marketing information technology * website, branding, logo, business cards, letterheads * hosting, e-commerce, domain names, sms solutions, streaming video and complete web strategies *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Pure CSS dropdown Menu, take II
Works fine in FF 1.5.0.7 if you want to add that to your list of Win browsers. ;) On Tue, 17 Oct 2006 03:21:00 +1000, Thierry Koblentz [EMAIL PROTECTED] wrote: I followed all suggestions made after I published the first demo and came up with this... Demo: http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/ Article: http://www.tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp Keyboard users can go from one top level item to the next without having to go through the nested links (the enter key toggles the sub-menus). Regarding pointing devices; I went with vertical sub-menus rather than horizontal ones (avoiding diagonal paths) and I added a 10px cushion all around the sub-menus. Is that good enough now? :) --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] different spacing across browser p in li
Why can't you remove it? On Tue, 17 Oct 2006 10:08:56 +1000, Taco Fleur [EMAIL PROTECTED] wrote: Thanks, any suggestions on how to solve that? I can't remove the clear:left Kind regards, Taco Fleur free call 1800 032 982 - fax 07 3414 6464, international +61 7 3325 5103 www.pacificfox.com.au an industry leader with commercial experience since 1994 . our services: - online, print, marketing information technology - website, branding, logo, business cards, letterheads - accept online credit card payments www.commerceengine.com.au - domain registrations, .com for as low as fifteen dollars a year, .com.au for fifty dollars two years! -Original Message- From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of John Faulds Sent: Monday, 16 October 2006 9:21 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] different spacing across browser p in li Seems to be the inline clear:left on your form which is causing the trouble in IE. As for using other block level elements within a list item, I don't see the need for them unless your list items contains more than one line of content. If you want to differentiate between two paragraphs or if the content is quite long, then definitely use p tags, but in your case your content is only 2-3 words long. Lists are perfectly valid containers of content by themselves and I think they're fine in your case. On Mon, 16 Oct 2006 20:51:21 +1000, Taco Fleur [EMAIL PROTECTED] wrote: *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Relative positioning and Netscape 6
Relative positioning is not a very reliable cross browser method for getting elements where you want them. You're better off using an element's margins for most positioning and in some cases floats (e.g. float: left/right). On Mon, 16 Oct 2006 11:35:58 +1000, Andrew Ivin [EMAIL PROTECTED] wrote: Hi all, I am trying to find out what Netscape 6's capabilities are as far as relative positioning goes. I have a page where I have a parent div, absolutly positioned, with two relatively positioned child block level elemnets; one positioned to the top left, the other top right. The top right absolutely positioned element is ignoring the relative container in NS 6, and is positioning relative to the viewport - top right of browser window. Could this be NS 6's lack of support of positioning? -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] list-image cross browser position
It could be cos you need to specify both horizontal and vertical values for bg-position. Although the negative left margin may have something to do with it. On Fri, 13 Oct 2006 22:54:19 +1000, Taco Fleur [EMAIL PROTECTED] wrote: That is however giving me a weird result on http:// http://clickfind.com.au/why-clickfind.cfm clickfind.com.au/why-clickfind.cfm The background images are dissappearing in IE. Kind regards, Taco Fleur - watch our http://pacificfox.tv/ new video online! _ Pacific FoxT free call 1800 032 982 or mobile 0421 851 786 - fax 07 3414 6464, international +61 7 3325 5103 www.pacificfox.com.au http://www.pacificfox.com.au/?source=email an industry leader with commercial experience since 1994 . our services: * online, print, marketing information technology * website, branding, logo, business cards, letterheads * hosting, e-commerce, domain names, sms solutions, streaming video and complete web strategies _ From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Frances Berriman Sent: Friday, 13 October 2006 9:52 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] list-image cross browser position Using list image is notoriously annoying to get lined up right. Ditch it and apply background images to your list items and position your text accordingly with margins. You'll find it a lot easier to get it the same across browsers. (btw the pacific fox logo that applies itself to the top of my reply is wonderful. :/ ) FRANCES BERRIMAN http:// http://fberriman.com fberriman.com _ From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Taco Fleur Sent: 13 October 2006 12:24 To: wsg@webstandardsgroup.org Subject: [WSG] list-image cross browser position Hello all, is there any way to have a list-image in the same position across Internet Explorer and Firefox? In IE the image is very close to the text, in Firefox it is just about where I would like it to be. Thanks in advance. Kind regards, Taco Fleur - watch our http://pacificfox.tv/ new video online! _ Pacific FoxT free call 1800 032 982 or mobile 0421 851 786 - fax 07 3414 6464, international +61 7 3325 5103 www.pacificfox.com.au http://www.pacificfox.com.au/?source=email an industry leader with commercial experience since 1994 . our services: * online, print, marketing information technology * website, branding, logo, business cards, letterheads * hosting, e-commerce, domain names, sms solutions, streaming video and complete web strategies __ This email has been scanned by the MessageLabs Email Security System. For more information please visit http://www.messagelabs.com/email __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** __ This email has been scanned by the MessageLabs Email Security System. For more information please visit http://www.messagelabs.com/email __ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] List background images disappearing
It's a hasLayout issue. Try this:
ol.styled { list-style: none; margin-left: 0; padding-left: 0; }
ol.styled li {
background-position: 0 0;
background-repeat: no-repeat;
padding: 2px 0 2px 30px;
margin-bottom: 0.5em;
}
* html ol.styled li { height: 1%; }
ol.styled p { margin: 0; }
(Not sure that you actually need the extra p inside your list items.)
On Sat, 14 Oct 2006 10:00:27 +1000, Taco Fleur [EMAIL PROTECTED]
wrote:
I am having some trouble with list background images disappearing on
http://development.clickfind.com.au/contact-us.cfm and
http://development.clickfind.com.au/why-clickfind.cfm
ol.styled li {
list-style-type: none;
background-position: left;
background-repeat: no-repeat;
padding-left: 30px;
margin-left: -30px;
}
ol.styled .nrb-1 {
background-image: url(../image/bullet/nrb-1.gif);
}
I have also tried
ol.styled li {
list-style-type: none;
background-position: left top;
background-repeat: no-repeat;
padding-left: 30px;
}
I went from using list style images to using a background because it is
more
consistent across browsers, but it is also giving me a hard time, any
advice
would be much appreciated. thanks in advance.
Kind regards,
Taco Fleur - watch our http://pacificfox.tv/ new video online!
_
Pacific FoxT
free call 1800 032 982 or mobile 0421 851 786 - fax 07 3414 6464,
international +61 7 3325 5103
www.pacificfox.com.au http://www.pacificfox.com.au/?source=email an
industry leader with commercial experience since 1994 .
our services:
*
online, print, marketing information technology
*
website, branding, logo, business cards, letterheads
*
hosting, e-commerce, domain names, sms solutions,
streaming video and complete web strategies
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] would someone tell me where
You could always make your own, but maybe you're looking for these: http://gtmcknight.com/buttons/validated.php On Sat, 14 Oct 2006 11:39:17 +1000, [EMAIL PROTECTED] wrote: hi, i have seen small css and xhtml w3c icons to place on pages. would someone tell me where i can obtain these small icons? dwain *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Using my Image replacement technique to create graphic menus
Article: http://www.tjkdesign.com/articles/TJK_tipMenu_demo.asp That should actually be: http://www.tjkdesign.com/articles/using_real_images_in_menus.asp ;) -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Safari and bg-images for list bullets
I have a couple of problems with Safari which can be seen on this page: http://www.tyssendesign.com.au/examples/test.html The first is the misalignment of the bg-images that I'm using for bullets. Every other browser including IE5 displays them how I want them except for Safari. I did a quick search but the only thing I came up with was that this was a bug that only affected earlier versions but it seems to be the same in Safari 2.0 too. So, is there a solution? Does it require using a Safari-only filter? Which brings me on to the next problem which is illustrated by the search box. Most browsers displayed it how I wanted, but I had to use a filter to give Opera 8.5 a different height (Opera 9 is OK). It seems like Safari has the same problem, so again, do I need to add a filter for Safari, or is there a better way to do this without resorting to any filters/hacks? Cheers John -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Safari and bg-images for list bullets
I've already done that though. The space between the two states is about 5 times the height of the actual bullet. In Safari you can actually seem the on state appearing above the off state even though it's about 40px below it in the image file and bg-repeat is set to no-repeat. On Tue, 10 Oct 2006 21:11:20 +1000, Eystein Alnaes [EMAIL PROTECTED] wrote: On 10/10/06, John Faulds [EMAIL PROTECTED] wrote: I have a couple of problems with Safari which can be seen on this page: http://www.tyssendesign.com.au/examples/test.html So, is there a solution? Does it require using a Safari-only filter? I ran into the same problem not long ago, and solved by simply altering the image itself - to have more whitespace between the two states (hover and not-hover). Using a gif it won't make the image file any (noticeably) larger. It's not an ideal solution, but it's a means to an end. ~eys *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Safari and bg-images for list bullets
use an oversized image with loads of white space I ended up doing this as per the example in your link with the extra white space below (as well as in between) and now it's fine. Thanks. Any ideas on the height of the input problem? -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] help with layout postioning
Im planning on replacing those underscore hacks with the star selector method, is that still the way to go with ie 7 on the horizon? IE7 won't understand the * html (Holly) hack. You're better using conditional comments for serving different versions of IE different style rules. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] In the 'Wow, if only everyone did this category...
the decaf link came up blank in ff 2.0 rc2. is there a setting i'm missing to choose between css2.1 and css3 rendering? Firefox (and others) don't support the multiple background property so, no, there's no setting you can change. The reason you can't see anything is because the text is set to white - with a bg-image, you'd be able to see it. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Site breaks in IE/Win
Remove the position: relative; top: x; left: x values from your anchors and instead add float: left (or right) to #menu ul li a. Also, you're using incorrect comments in your CSS. CSS comments are like this: /* comment this bit out */ not like this: //comment this bit out On Sun, 08 Oct 2006 09:53:32 +1000, Maanik Singh [EMAIL PROTECTED] wrote: Hi, I'd appreciate any help with getting my css list menu to layout properly in IE/Win. We've been trying to use mostly css/html and are using a styled list and moving the background position on an image for the rollover effect. The positioning isn't working properly. I think its an easy background position fix. I'm hoping to get this working. Client is pushing to scrap css menu tables and javascript. : ( The site it up at http://appirio.com The stylesheet is located at http://appirio.com/css/appirio.css. login with appirio/reveal if necessary. Thanks in advance, maanik *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Apply style to li only
Put the content inside another tag inside the li and style that tag differently. On Thu, 05 Oct 2006 12:37:28 +1000, Taco Fleur [EMAIL PROTECTED] wrote: Is there a way to apply a style to the li tag only? For example; when I have an ordered list, I would like the numbers to have the same font type as the paragraphs p, to do so I apply a style to the ul or li but that is inherited by anything within the li tag. Thanks in advance... Kind regards, Taco Fleur - watch our http://pacificfox.tv/ new video online! _ Pacific FoxT free call 1800 032 982 or mobile 0421 851 786 - fax 07 3414 6464, international +61 7 3325 5103 www.pacificfox.com.au http://www.pacificfox.com.au/?source=email an industry leader with commercial experience since 1994 . our services: * online, print, marketing information technology * website, branding, logo, business cards, letterheads * hosting, e-commerce, domain names, sms solutions, streaming video and complete web strategies *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Max-width issues
Put the max-width expression in an IE-only stylesheet served up with
conditional comments. That way there's no need for the Holly Hack (in
fact, it's best to put anything that requires the Holly Hack in an IE-only
stylesheet) and your CSS will validate OK too.
On Tue, 03 Oct 2006 18:29:08 +1000, John 'Max' Maxwell
[EMAIL PROTECTED] wrote:
Good Morning All,
I am having a bit of a problem with the old 'max-width' issue in IE and
would like to know your thoughts on the subject.
If I add this to my style sheet:
#outer_wrapper {
max-width: 800px; }
Then I am fine in FF but not in IE - in IE the outer container just
keeps stretching with the browser window. So if I add the following,
then all is well in all browsers BUT the code is no longer valid:
* html div#outer_wrapper {width: 800px /* fallback value */;
width:expression(((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth)
1000 ? 800px : (((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) 570 ? 552px : 99.7%));
}
Is my syntax or something incorrect or is there just no way of adding
this fix without going 'invalid'?? Does the above code even belong in a
style sheet as it doesn't look like standard CSS to me. So you know, I
am a designer who is wholly self taught in XHTML/CSS/PHP so there are
huge gaps in my 'education' - I would therefore appreciate careful
handling. Having said that, the 10 years I spent in the military when I
should have been at Art School does mean I am capable of taking it
'straight' - I would just appreciate it if any derisory comments about
my code were followed by a helpful tip of how to put it right ;-)
Many thanks.
Kind regards,
Max.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] IE Issue: focus not set on image buttons within a floated div
Is it not due to IE not using :focus like other browsers? To get it to accept :focus on buttons, you'd need to use javascript. A bit hard to tell though without seeing any code or a link. On Wed, 04 Oct 2006 04:26:32 +1000, Ruiz, Kevin [EMAIL PROTECTED] wrote: I have two image buttons that are not displaying a focus indicator in IE...this works fine in Firefox. The culprit seems to be the fact that both are within a div that's floating. Does anyone know a way around this. My client has made an issue of the fact that a user cannot see a visual indicator of focus when the user has tabbed to either of the buttons. Kevin Ruiz Web Designer First Data Government Solutions 11311 Cornell Park Drive, Suite 300 Cincinnati, OH 45242 p: 513.489.9599 x293 f: 513.489.6521 [EMAIL PROTECTED] www.govconnect.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] different position in Firefox - site check
You've got this applied to the div that contains those links: postion:absolute;height: 28px; position:relative It looks like it should probably be absolute but the relative is going to override the absolute as it comes last. Also, all that inline style is not recommended - it should be moved to your stylesheet. On Tue, 03 Oct 2006 13:47:51 +1000, Taco Fleur [EMAIL PROTECTED] wrote: Hello all, I have a page that validates, however in IE it is in the right position, but when looking at it in Firefox it is approx 12px lower than in IE. http://www.pacificfox.com.au/infiniti/phone-systems.htm Would anyone have any idea why? Thanks in advance. Kind regards, Taco Fleur - watch our http://pacificfox.tv/ new video online! _ Pacific FoxT free call 1800 032 982 or mobile 0421 851 786 - fax 07 3414 6464, international +61 7 3325 5103 www.pacificfox.com.au http://www.pacificfox.com.au/?source=email an industry leader with commercial experience since 1994 . our services: * online, print, marketing information technology * website, branding, logo, business cards, letterheads * hosting, e-commerce, domain names, sms solutions, streaming video and complete web strategies *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Disappearing LI
Try removing the width from #cleaning-categories li p a. On Tue, 26 Sep 2006 18:39:58 +1000, Taco Fleur [EMAIL PROTECTED] wrote: Hi all, I have a page (valid HTML) http://www.redlandscleaningsolutions.com.au/cleaning-product-categories.cfm when moving the mouse over the li the numbers disappear, would anyone know what causes that? Thanks in advance. Kind regards, Taco Fleur - watch our http://pacificfox.tv/ new video online! _ Pacific FoxT free call 1800 032 982 or mobile 0421 851 786 - fax 07 3414 6464, international +61 7 3325 5103 www.pacificfox.com.au http://www.pacificfox.com.au/?source=email an industry leader with commercial experience since 1994 . our services: * online, print, marketing information technology * website, branding, logo, business cards, letterheads * hosting, e-commerce, domain names, sms solutions, streaming video and complete web strategies *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Image replacement menu that works with images off
Maybe I'm missing something but you've got an image in your HTML. That's
not really an image replacement method in that case.
On Wed, 27 Sep 2006 08:17:03 +1000, Mike at Green-Beast.com
[EMAIL PROTECTED] wrote:
John Faulds wrote:
It should be pointed out that this method has
problems when you resize the text (unless
you've since found a way to fix that Mike).
I did, John, as seen on the site I just used it on:
http://myrnamunroe.org/.
Basically what I did is 1) allowed lots of room for growth and 2) applied
overflow:hidden to the container:
#header {
width : 100%;
height : 200px;
overflow : hidden;
}
It can get obscenely big now without spilling out of the box.
Mike
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Image replacement menu that works with images off
I wrote an article about styling a horizontal nav with the IR technique I mentioned previously: http://www.tyssendesign.com.au/articles/css/single-image-replacement-rollovers-with-suckerfish-dropdowns/ It also includes a bit on how to combine it with Suckerfish Dropdowns, but the first part should relate to what you want. On Wed, 27 Sep 2006 08:15:36 +1000, Kim Kruse [EMAIL PROTECTED] wrote: Hi, Maybe I should extend my question a bit. Here on this page http://geekministry.com/yeah/index.php I'm currently using Dan Cederholm/Pixi's solution http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html which works very well with images on. The obvious problem is with images off. Is using a list the best way for a navigation? The reason I ask I because is because I want to follow best practice (at my level out in the fine art of doing web sites) and I think that using a list and css images (separating structure from presentation et al) must be better than using real nav buttons or shims/spacer gifs with alt texts... right? The thing I can't get my head around is how to have different size nav items without creating 4 css rules for each nav item. (similar to example 4 in this article http://tjkdesign.com/articles/tip.asp) but that would also require me to use a div for each nav item... right? I've probably been thinking so much over this problem that I might be overlooking a real simple solution. Thank you Kim John Faulds skrev: snip It should be pointed out that this method has problems when you resize the text (unless you've since found a way to fix that Mike). My recommendation would be: http://www.ryznardesign.com/web_coding/image_replacement/index.html --Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Image replacement menu that works with images off
Hi Mike, Sorry, I've had a closer look now and see how you've done it. My only problem with that method would be that you've needed to apply overflow: hidden to a block level element above the block level element that holds the anchor and span. This is probably OK for something like a header where you'd probably have a h1 contained within a #header anyway, but if you want to image replace a navigation list, you'd have to add additional elements (as well as the span) to each list item to hide the overflow. On Wed, 27 Sep 2006 09:25:10 +1000, Mike at Green-Beast.com [EMAIL PROTECTED] wrote: John Faulds wrote: Maybe I'm missing something but you've got an image in your HTML. That's not really an image replacement method in that case. But it is, though. The embedded image is there for another reason and it's not the same image: It's my pre-loading [1] technique, John; it's the hover/focus image. Granted, you might be thinking if I'm going to do that I could very well just place the embedded image and apply alt text in the alt attribute, and that would make sense, but then I'd lose the hover/focus effect on the inside pages (unless I applied the effect using onmouseover/onfocus with JavaScript). [Plus every thing above the #header div is in a single include file.] I preload it that way; it's offset outside the viewport. If you compare the two images you note the subtle style differences. I do it as a courtesy and performace enhancement to those with slower connections. It's not needed on the home page, but it gets it in the cache ahead of time for the inside pages. I am trying to avoid that flicker so often associated with IR methods. And it doesn't affect resizing of the content. It'll create a horizonatal scroll bar if styles are off, but no scrolling is needed so I can live with that. I hope that makes sense. [1] http://green-beast.com/blog/?p=118 Respectfully, Mike Cherim *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Standalone IE7
I use the one found here: http://tredosoft.com/IE7_standalone On Mon, 25 Sep 2006 18:43:00 +1000, Paul Collins [EMAIL PROTECTED] wrote: Can anyone recommend the best place to get the latest standalone IE7? I've downloaded it from Evolt and a few other places and it just seems to crash after a couple of clicks. Would appreciate your help. Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Validate multiple (X)HTML pages
The WDG validator can work recursively: http://www.htmlhelp.com/tools/validator/ I was going to suggest the WDG as well. The online version's limit is 100 pages I think. -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS confusion
It's the 'attribute' selector and is not understood by IE 7.
In the example, rules for all browsers are in black, rules for IE-only in
blue and rules for all but IE(6) in green.
On Sat, 23 Sep 2006 20:43:53 +1000, Designer
[EMAIL PROTECTED] wrote:
In the recent 'Links for light reading', the author of:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Uses the following:
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
and I don't understand the [id] bit. I've googled and found nothing,
and I've fiddled with it and found that it is parsed OK by standard
browsers and ignored by IE6 (but used by IE7).
Anyone have any info on this? It also validates as CSS.
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] What version of IE should be build to
Technically, I can see you using the * html inside an IE only style sheet. I've been doing that a bit lately as sometimes there may be only one or two rules that are different between = 6 or 7 and it doesn't seem worth the effort creating a separate stylesheet for both and then conditional comments to call the two when * html will do the job just the same. -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Site check: lot's of space where there shouldn't be any
It's the clear: both on the 'Cylinder Heads' h2 which is causing the problem. On Fri, 22 Sep 2006 09:41:17 +1000, Taco Fleur [EMAIL PROTECTED] wrote: Good morning all, We have a page that is displaying an enormous amount of white where there shouldn't be any. I validated the page http://development.yellaterra.com.au:92/products/car-performance/product-det ail/index.cfm?productCategoryIdentity=2 http://development.yellaterra.com.au:92/products/car-performance/product-de tail/index.cfm?productCategoryIdentity=2modelIdentity=2 modelIdentity=2 and it's fine. In Firefox however there is about 250px space between the Make: British Leyland Model: A Series and the header Cylinder Heads, I was wondering if anyone knew what is causing that? There are a few more issues on this page, but I'll stick with asking for help on the space for now. Thanks in advance for any help. Kind regards, Taco Fleur _ Pacific Fox free call 1800 032 982 or mobile 0421 851 786 - fax 07 3414 6464, international +61 7 3325 5103 www.pacificfox.com.au http://www.pacificfox.com.au/?source=email an industry leader with commercial experience since 1994 . our services: * online, print, marketing information technology * website, branding, logo, business cards, letterheads * hosting, e-commerce, domain names, sms solutions and web strategy *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Content Jumps onClick in Firefox
Try adding line-height: 0.8em to ul#interlinks li. On Fri, 22 Sep 2006 11:45:02 +1000, Samuel Richardson [EMAIL PROTECTED] wrote: An interesting bug this one, open up: http://www.intrepidtravel.com/ In Firefox. Scroll to the bottom of the page and click on one of the country links, you'll notice that just after the click the content of that area jumps down. I thought it might have been something to do with line-heights set on the links active state but the link clicked can cause an entirely different line in the same area to jump down. Plus I haven't explicitly set any styles on active links anywhere in the CSS. Any ideas? I've just noticed this happening on a few other pages in different areas and I suspect it's a fundamental flaw somewhere in my CSS. Thanks, Samuel www.intrepidtravel.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
