RE: [WSG] Site critique and problem - www.mondotron.com
Hi, Your layout is not extensible. If you have a 800x600 resolution, the pub banner goes underneath the Mondotron logo box, and you'll have a horizontal scroll. Make one of the columns width in percentage so its size will be adapted for the resolution. In boca al lupo ! Angela Ricci -Message d'origine- De : [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] la part de Mondo | Mondotron Envoyé : dimanche 27 février 2005 22:28 À : wsg@webstandardsgroup.org Objet : [WSG] Site critique and problem - www.mondotron.com Hi all Long term reader / first time poster - just about to launch a new site: http://www.mondotron.com and we'd appreciate any critique. The site enables users to generate free wallpaper/background images for phones/PDAs/messaging applications through the use of a Flash interface. Also, there's a small problem with Firefox 1.0 - a colleague gets a problem with a file upload button on the http://www.mondotron.com/design.php page, replicated at: http://www.mondotron.com/file-upload-button.gif The actual button appears as a small block - haven't been able to replicate it on other machines with same Firefox version. Thanks! Nettio ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] getting two colums to be of the same height
Thanks! It took some fiddling but faux columns did the job! :) Cheers, Marco -- Marco van Hylckama Vlieg Senior Internet Developer email: [EMAIL PROTECTED] www: http://www.i-marco.nl/ On Feb 28, 2005, at 1:40 AM, Lindsay Evans wrote: Hi Marco, Faux Columns http://www.alistapart.com/articles/fauxcolumns/ are probably your best bet. On Mon, 28 Feb 2005 00:29:24 +0100, Marco van Hylckama Vlieg [EMAIL PROTECTED] wrote: Is there any cross browser, standards compliant way to get those two grey columns to be the same height? It would make the whole thing look a lot better. What I'd like is the shorter column to have extra empty space to fill it up to be just as high as the longer one. -- Lindsay Evans http://lindsayevans.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] [on-topic]wireframes
Iva Koberg wrote: What's stopping you from creating the prototype boxes in XHTML + CSS? It has the added advantage of meaning that once you've got your layout, you've also got your document structure. Just add the content and remove the border: 1px solid black; properties and you're done. One of the points of using prototypes is that they are fast to build and thus desposable. If you're using XHTML/CSS prototypes there is the temptation to turn it into the final template. This either means that you spend too long thinking about the code/structure of a prototype that is likely to change, or you end up building in issues due to the fact that the prototype was built rapidly. I tend to use low-fi wireframes then hi-fi prototypes, usually output from the Phtoshop/Fireworks templates as regular table based HTML. Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] validation logos - kitemarks?
I think most people put validation logos on their sites for peers. This is often just vanity/showing off. However other web developers do click these logos and report back if they find problems, so they can have their benefits. I know, I know, we should al make sure our pages validate when they have been changes, but sometimes it's easy to forget, especially as most of the time it's not relay mission critical. Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] validation logos - kitemarks?
- Original Message - From: Andy Budd [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Monday, February 28, 2005 9:59 AM Subject: Re: [WSG] validation logos - kitemarks? I think most people put validation logos on their sites for peers. This is often just vanity/showing off. However other web developers do click these logos and report back if they find problems, so they can have their benefits. I know, I know, we should al make sure our pages validate when they have been changes, but sometimes it's easy to forget, especially as most of the time it's not relay mission critical. Andy Budd I have today knocked up a 'logo' which links to this group's spiel about standards, and put it on my business web site. Just an experiment, of course. . . If you want to see it, go to the link in my signature (below), pick the html version and it's on the opening page. Bob McClelland, Cornwall (U.K.) www.gwelanmor-internet.co.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] [on-topic]wireframes
By chance, I've just finished building wireframes for a project in XHTML CSS. I found it a little more time consuming and as Andy mentioned you can sit there and spend too long thinking about it. I mean wireframes should be addressed separately from any visual / production stages - your attention should be on boxing out the page in a usable, accessible layout and not on why the content area sits 50 pixels below the side navigation. The complications of writing the XHTML/CSS can stagnant the process. Having said that, I now have the layout pretty much built and ready to hang some visuals off it and a protosite there for testing and content. I also now have the stylesheet set so I can adjust the values for future use and the client was impressed. I think in future I will sketch out the wireframes separately and then apply it to the XHTML/CSS to use as a protosite. Dave O'Brien On Mon, 28 Feb 2005 09:54:38 +, Andy Budd [EMAIL PROTECTED] wrote: Iva Koberg wrote: What's stopping you from creating the prototype boxes in XHTML + CSS? It has the added advantage of meaning that once you've got your layout, you've also got your document structure. Just add the content and remove the border: 1px solid black; properties and you're done. One of the points of using prototypes is that they are fast to build and thus desposable. If you're using XHTML/CSS prototypes there is the temptation to turn it into the final template. This either means that you spend too long thinking about the code/structure of a prototype that is likely to change, or you end up building in issues due to the fact that the prototype was built rapidly. I tend to use low-fi wireframes then hi-fi prototypes, usually output from the Phtoshop/Fireworks templates as regular table based HTML. Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Dave O'Brien Venting my spleen at: http://www.ventingspleen.co.uk Develop the web at: http://www.thewebdeveloper.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] IE problem at small window size
Hello This is my first post, but I've read the list for ages and learnt masses - thanks very much. I have a problem with IE at small window size (640 x 480) when the content of the page gets shunted underneath the menu bar on the left. You should be able to see it happening on http://actemp.sipu.apu.ac.uk/timetabling/camb/ttindex.phtml the css is at http://web.apu.ac.uk/templates/php/common.css I've tried all sorts of things to stop it happening (this isn't the only page it occurs on) but have run out of ideas. Any help would be greatly welcomed. Thanks very much Rachel Rachel Campbell Web Assistant, Information Services CITS 01223 363271 ext 2026 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] IE: why are you so...
Hello everyone! As my first post I'd like to ask you something technical. I've got a simple div element with an unordered list inside (as you can see at www.re1.it/pierofix/justlinkit : the big gray square with all links). The div's width is set in percentage and his padding is set in px: ok, it works! In the previous version also the padding was set in percentage, but this solution makes the page a Guernica (by Picasso), with IE, OBVIOUSLY. The problem is that when I pass the mouse over one of the link in the list, the link shifts left and top (with 300 links, it seams to be in a disco!). Have you ever seen this mess before? How did you solve it? I've set the padding in px but I'm not satisfied. Thanks to all, Piero. P.S. Sorry for my english. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE problem at small window size
Rachel Campbell wrote:
I have a problem with IE at small window size (640 x 480) when the
content of the page gets shunted underneath the menu bar on the left.
You should be able to see it happening on
http://actemp.sipu.apu.ac.uk/timetabling/camb/ttindex.phtml
A large enough negative back margin on div#leftcolumn will keep IE/win
from pushing down the main content.
However, IE/win will then also need to display the rest of the page like
other browsers do, so you need to set height: auto on div#leftcolumn, or
else the footer will jump around.
You also need to feed IE/win with a new HasLayout trigger.
The total fix:
div#leftcolumn {margin-right: -163px; height: auto}
@media all {
* html div#wrapper2 {height: 0;}
}
Your page is now close to identical in Opera, Firefox and IE6.
regards
Georg
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] IE: why are you so...
Here is a possible cause and solution to your problem... Quirky Percentages in IE6's Visual Formatting Model: http://www.positioniseverything.net/explorer/percentages.html Russ Hello everyone! As my first post I'd like to ask you something technical. I've got a simple div element with an unordered list inside (as you can see at www.re1.it/pierofix/justlinkit : the big gray square with all links). The div's width is set in percentage and his padding is set in px: ok, it works! In the previous version also the padding was set in percentage, but this solution makes the page a Guernica (by Picasso), with IE, OBVIOUSLY. The problem is that when I pass the mouse over one of the link in the list, the link shifts left and top (with 300 links, it seams to be in a disco!). Have you ever seen this mess before? How did you solve it? I've set the padding in px but I'm not satisfied. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE: why are you so...
good work ;)) ps = ciao piero sono gizax ^_^ [EMAIL PROTECTED] wrote: Hello everyone! As my first post I'd like to ask you something technical. I've got a simple div element with an unordered list inside (as you can see at www.re1.it/pierofix/justlinkit : the big gray square with all links). The div's width is set in percentage and his padding is set in px: ok, it works! In the previous version also the padding was set in percentage, but this solution makes the page a Guernica (by Picasso), with IE, OBVIOUSLY. The problem is that when I pass the mouse over one of the link in the list, the link shifts left and top (with 300 links, it seams to be in a disco!). Have you ever seen this mess before? How did you solve it? I've set the padding in px but I'm not satisfied. Thanks to all, Piero. P.S. Sorry for my english. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] [on-topic]wireframes - Prototype and IA not the Same
I think we're mixing up the conversation here. A prototype and an IA diagrams (site flow) are two very different things with different purposes. The IA diagrams would be worked out before the prototype and shows the logical relationship between pages (the IF THENS). It's a planning tool. On the other hand, if you've got a prototype then that would mean all of your planning is completed, it's a working version of the site, before it goes live. But, yes, I would agree that a prototype can be done using CSS and should through iteration turn into the final site. What is useful, in my opinion, for showing how the click throughs on a site works is what I would consider a true wireframe. That isn't the site mockups that look like a site made up of black lines. It's a navigable version of a site without *any* design or layout. Its purpose is to determine what should be accomplished on each page, what messaging should appear on each page and who is it written for, as well as what inbound and outbound links there are and how each page fits into the various user paths on the site. Example and more details: http://www.grokdotcom.com/wireframing.htm Careful visiting the link above you may learn way more than you expect to. :) Chris -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Iva Koberg Sent: Friday, February 25, 2005 12:19 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] [on-topic]wireframes David R wrote: /Should lead to yet another tool, Visio or OmniGraffle, if so what is recommended on the MAC OS side? What's stopping you from creating the prototype boxes in XHTML + CSS? It has the added advantage of meaning that once you've got your layout, you've also got your document structure. Just add the content and remove the border: 1px solid black; properties and you're done. Agree with David completely. Additional benefits of the XHTML/CSS prototype approach: - you end up with a fully navigable prototype that IMO is more effective in getting clients to understand and approve the deliverable - a functional prototype is also more effective in figuring out the most appropriate navigation schemes - if you are the ia and are working with a designer, you will provide clearer design input - once you are done, you don't have to throw away your work and move on to creating the site, the site is a living prototype, like David said - add content and CSS and you're done - prototypes are meant to change and be refined in iterations - it certainly is much easier, faster and reliable if you are using XHTML/CSS, preferably with a templating system or ideally a CMS (see http://www.livestoryboard.com/Tour/storyboarding-prototyping-for-the-web .html for example), which would update all navigation, links, etc. Take a look at this presentation - slide 44 specifically discusses the ideal process - First Things First: IA and CSS http://natek.typepad.com/blog/2004/07/web_visions_pre.html best, Iva ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE problem at small window size
At 14:22 28/02/05 +0100, you wrote:
Rachel Campbell wrote:
I have a problem with IE at small window size (640 x 480) when the
content of the page gets shunted underneath the menu bar on the left.
You should be able to see it happening on
http://actemp.sipu.apu.ac.uk/timetabling/camb/ttindex.phtml
A large enough negative back margin on div#leftcolumn will keep IE/win
from pushing down the main content.
However, IE/win will then also need to display the rest of the page like
other browsers do, so you need to set height: auto on div#leftcolumn, or
else the footer will jump around.
You also need to feed IE/win with a new HasLayout trigger.
The total fix:
div#leftcolumn {margin-right: -163px; height: auto}
@media all {
* html div#wrapper2 {height: 0;}
}
Your page is now close to identical in Opera, Firefox and IE6.
I've just noticed that this fix makes #footer come up the page;
unfortunately it needs to stay at the bottom of the page, below
#leftcolumn. Any ideas as to how that can be achieved?
Many thanks
Rachel
regards
Georg
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Rachel Campbell
Web Assistant, Information Services
CITS
01223 363271 ext 2026
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Colour Mixer
Title: Colour Mixer Crikey, this is a bit special; http://colormixers.com/mixers/cmr/
Re: [WSG] IE: why are you so...
Thanks a lot russ! Can I ask you (all) what do you think about my site? The address is www.itgmarinoni.it . Piero. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Site critique and problem - www.mondotron.com
Hi Angela The ad banner is intentionally meant to slide underneath the logo - I wanted to keep the layout as fluid as possible, so the page width should always be 100% occupied - the ad banner going under the logo was chosen as I'd rather not have the logo obscured in any way. You did highlight to me a glitch on the front page - I'd used the default Google image search code for the form, and the width of the input box was forcing a horizontal scrollbar [Mental Note: always double check default code :)] - thx. The Flash element is however 762px wide, so that is never going to allow a lack of scrollbars on an 800 x 600 window unfortunately. Nettio -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Ricci Angela Sent: 28 February 2005 09:09 To: wsg@webstandardsgroup.org Subject: RE: [WSG] Site critique and problem - www.mondotron.com Hi, Your layout is not extensible. If you have a 800x600 resolution, the pub banner goes underneath the Mondotron logo box, and you'll have a horizontal scroll. Make one of the columns width in percentage so its size will be adapted for the resolution. In boca al lupo ! Angela Ricci ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] [on-topic]wireframes - Prototype and IA not the Same
Chris Rizzo wrote: I think we're mixing up the conversation here. ik: Agree with Chris about mixing up the conversation and the differences between site flow diagrams and wireframes/storyboards. I suppose, as the original message was titled wireframes I assumed it was with regards to the latter. Yes, IA diagrams have a valuable role and purpose. The XHTML/CSS process I was advocating was for the next step of wireframing, followed by storyboarding, pretty much as the Grok suggests. But, yes, I would agree that a prototype can be done using CSS and should through iteration turn into the final site. ik: Exactly, and that's where the benefits of this approach kick in. My intended point was: after basic site diagrams, start with *no design* to get the content goals, site structure, navigation schemes nailed, add design (through XHTML/CSS addition and tweaks) gradually at the end of the planning in the storyboarding phase (ideally IA Diagrams Wireframes Storyboards Design Final Site). Example and more details: http://www.grokdotcom.com/wireframing.htm Careful visiting the link above you may learn way more than you expect to. :) ik: So true, GrokDotCom never ceases to inform/educate on subjects like wireframes, storyboards, effective copy, marketing, design, usability, etc. While not directly on the subject of web standards, it's a great read for anyone building web sites - http://www.grokdotcom.com/Volumes/archivefull.htm. The folks behind Grok are not new to web standards either, they use liveSTORYBOARD CMS to separate content, structure and presentation, update the site easily and publish to multiple formats (XHTML+CSS/HTML and text email/RSS/Atom). best, Iva. David R wrote: /Should lead to yet another tool, Visio or OmniGraffle, if so what recommended on the MAC OS side? What's stopping you from creating the prototype boxes in XHTML + CSS? It has the added advantage of meaning that once you've got your layout, you've also got your document structure. Just add the content and remove the border: 1px solid black; properties and you're done. Agree with David completely. Additional benefits of the XHTML/CSS prototype approach: - you end up with a fully navigable prototype that IMO is more effective in getting clients to understand and approve the deliverable - a functional prototype is also more effective in figuring out the most appropriate navigation schemes - if you are the ia and are working with a designer, you will provide clearer design input - once you are done, you don't have to throw away your work and move on to creating the site, the site is a living prototype, like David said - add content and CSS and you're done - prototypes are meant to change and be refined in iterations - it certainly is much easier, faster and reliable if you are using XHTML/CSS, preferably with a templating system or ideally a CMS (see http://www.livestoryboard.com/Tour/storyboarding-prototyping-for-the-web .html for example), which would update all navigation, links, etc. Take a look at this presentation - slide 44 specifically discusses the ideal process - First Things First: IA and CSS http://natek.typepad.com/blog/2004/07/web_visions_pre.html begin:vcard fn:Iva Koberg n:Koberg;Iva org:liveSTORYBOARD Inc. adr:#5;;2 Clarence Place;San Francisco;CA;94107;USA email;internet:[EMAIL PROTECTED] tel;work:415-615-9079 tel;fax:415-615-9036 tel;cell:415-823-5746 x-mozilla-html:FALSE url:http://www.livestoryboard.com version:2.1 end:vcard
[WSG] errant left-alignment
Hello As I work my way through my first non-table layout, I've run into a small quandary. The complete display and CSS-based navigation menu shows up left-aligned in IE55 PC. All is well in FF. The HTML and CSS have been validated. The test page: http://www.shrikhande.us/CSSPage/index1.htm Image of display on IE55 to show you how the display and the menu is left-aligned. http://www.shrikhande.us/CSSPage/indexIE55.gif Look forward to your advice on resolving this problem. Thanks! #dss# ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] horizontal list menus based on images rather text in css
Test platform IE 6.0 and XP pro.
I'm trying to create a horizontal image toolbar.
Basically, I have two versions that almost work
and being a week old newbie to web design I cannot
seem to tweak them to work.
This solution ignores the display: inline;
and my picture (yes thats me) displays vertically twice.
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
title/title
head
meta content=text/html; charset=utf-8 http-equiv=content-type /
style type=text/css
/*![CDATA[*/
/* 1. Use border: 1px solid some color to distinguish each item; */
/* 2. The red Ul contains all blue li's; */
/* 3. Each blue li contains one green a; */
/* 4. Each green a contains one inline text or picture;*/
ul a{
/*remove the text underline*/
text-decoration: none;
}
a{
border: 1px solid green;
}
/*remove this left-indentation consistently across all browsers*/
ul {
padding: 0;
margin: 0;
}
ul {
border: 1px solid red;
display: inline;
/*remove the HTML list bullets*/
list-style-type: none;
/*the length of screen*/
width: 59em;
height: 1.6cm;
/*text-align: left; Is this the default??*/
}
li {
/*force the list into one line*/
border: 1px solid blue;
display: inline;
}
.photo_link {
background: url(cf.tiny.jpg) center center no-repeat;
border: 1em solid black;
display: block;
width: 70px;
height: 82px;
font-size: 0;
}
/*]]*/
/style
/head
body
br /
br /
div id=navcontainer
ul
lia href=# class=photo_link/a/li
lia href=# class=photo_link/a/li
/ul
/div
br /
/body
/html
-
So I started over...made a new file ..
Inspired by the fact that this worked for one picture...
#sample
{
width: 80px;
height: 100px;
background-image: url(cf.jpg);
background-repeat: no-repeat;
background-position: center;
font-size: 0px;
color: red;
border: 10px solid green;
}
/style
/head
body
h1 id=sample4
Heading here
/h1
I tried a third time..
this time my image displays horizontally (funny how display:inline works
now) but I cannot get it to show the whole picture and the size seems
to be determined by the text not the size I give... font-size: 0;
is IGNORED AS WELL.
I'd appreciate any hints and a big thanks to max design's excellent
tutorials that got me started super fast and made me aware of this forum
:-)
my last try:___
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
title/title
head
meta content=text/html; charset=utf-8 http-equiv=content-type /
style type=text/css
/*![CDATA[*/
/* 1. Use border: 1px solid some color to distinguish each item; */
/* 2. The red Ul contains all blue li's; */
/* 3. Each blue li contains one green a; */
/* 4. Each green a contains one inline text or picture;*/
ul a{
/*remove the text underline*/
text-decoration: none;
}
/*remove this left-indentation consistently across all browsers*/
ul {
padding: 0;
margin: 0;
}
ul {
border: 1px solid red;
/*remove the HTML list bullets*/
list-style-type: none;
/*the length of screen*/
width: 59em;
height: 1.6cm;
/*text-align: left; Is this the default??*/
}
li {
border: 1px solid blue;
margin-left: .2em;
margin-right: .2em;
margin-bottom: .2em;
/*margin-top: -20em; ignored*/
/*force the list into one line*/
display: inline;
}
.link{
border: 1px solid green;
width: 80px;
height: 100px;
margin-left: .2em;
margin-right: .2em;
margin-top: -2em;
margin-bottom: .2em;
padding: 2em -.15em;
background: url(cf.tiny.jpg) no-repeat;
color: red;
width: 70px;
height: 82px;
fontsize:1 em;
}
/*]]*/
/style
/head
body
ul
lia href=# class=linkChe/a/li
lia href=#class=linkCheese/a/li
lia href=# class=linkCheese/a/li
lia href=# class=linkCheese/a/li
lia href=# class=linkCheese/a/li
/ul
br /
/body
/html
inline: cf.tiny.JPG
Re: [WSG] errant left-alignment
You'll need to align the text of the body to be centered, and align the
text back to left within your wrapper div:
body {
margin: 10px 0 10px 0;
padding:0;
background-color:#FFF;
color:#000;
min-width:750px;
text-align: center;
}
div#wrap {
background:#FFF;
margin:0 auto;
width:750px;
border: 1px solid #5E5E5E;
text-align: left;
}
That should do it (not tested). HTH
-John
On Feb 28, 2005, at 1:12 PM, Devendra Shrikhande wrote:
Hello
As I work my way through my first non-table layout, I've run into a
small quandary. The complete display and CSS-based navigation menu
shows
up left-aligned in IE55 PC. All is well in FF.
The HTML and CSS have been validated.
The test page:
http://www.shrikhande.us/CSSPage/index1.htm
Image of display on IE55 to show you how the display and the menu is
left-aligned.
http://www.shrikhande.us/CSSPage/indexIE55.gif
Look forward to your advice on resolving this problem.
Thanks!
#dss#
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] block elements should expand to contain inline children?
H - I'm having trouble dealing with one of those CSS concepts that I
considered as easy as breathing...
I've got a block-level element (a div) that contains an inline element
(a strong tag, but span would work the same...). When I apply padding to
the internal element, it oversteps the boundaries of its parent element
by the amount of the padding.
Example:
div {
background-color:#FF0066;
}
div strong {
padding: 4px;
background-color:#00;
}
divstrongTEXT TEXT/strong/div
(example posted at http://www.capstrat.com/development/test/test.html)
In this case the strong tag (in all tested browsers except for IE6+)
exceeds the boundaries of the div by 4px.
I thought the rule was that a container should expand to hold its
contents (excepting floated elements...)
Apparently, I've been wrong all along. Can anyone kick me in the right
direction?
Scott Reston
Director, Web Development
Capstrat
919/882.1966 v
919/834.7959 f
1201 Edwards Mill Road, Suite 102
Raleigh, NC 27607
www.capstrat.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] errant left-alignment
Worked like a charm...
Only thing is why is the Local Nav showing up left aligned? I have the
following style:
div#locnav ul {
list-style:none;
padding:0;
margin:0;
width: 145px; /* Width of Menu Items */
border-top: 1px solid #AF0A38;
}
div#locnav ul li {
list-style:none;
display:inline;
margin:0;
padding:0;
text-align: right;
}
div#locnav ul li a {
display: block;
text-decoration: none;
color: #777;
padding: 3px;
border-right: 1px solid #AF0A38;
border-bottom: 1px solid #AF0A38;
}
div#locnav ul li a:hover {
color: #fff; background: #AF0A38;
}
I thought it would show up as right-aligned as it displays in FF.
#dss#
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of John D Wells
Sent: Monday, February 28, 2005 12:59 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] errant left-alignment
You'll need to align the text of the body to be centered, and align the
text back to left within your wrapper div:
body {
margin: 10px 0 10px 0;
padding:0;
background-color:#FFF;
color:#000;
min-width:750px;
text-align: center;
}
div#wrap {
background:#FFF;
margin:0 auto;
width:750px;
border: 1px solid #5E5E5E;
text-align: left;
}
That should do it (not tested). HTH
-John
On Feb 28, 2005, at 1:12 PM, Devendra Shrikhande wrote:
Hello
As I work my way through my first non-table layout, I've run into a
small quandary. The complete display and CSS-based navigation menu
shows up left-aligned in IE55 PC. All is well in FF.
The HTML and CSS have been validated.
The test page:
http://www.shrikhande.us/CSSPage/index1.htm
Image of display on IE55 to show you how the display and the menu is
left-aligned. http://www.shrikhande.us/CSSPage/indexIE55.gif
Look forward to your advice on resolving this problem.
Thanks!
#dss#
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] block elements should expand to contain inline children?
I doubt this is much help, but I did notice that if you applied position: relative to the strong element that it behaved the same in IE6 as it does in FF. Otherwise, in IE6, it displays as it should. - Original Message - From: Scott Reston [EMAIL PROTECTED] Subject: [WSG] block elements should expand to contain inline children? I thought the rule was that a container should expand to hold its contents (excepting floated elements...) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE problem at small window size
Rachel Campbell wrote:
http://actemp.sipu.apu.ac.uk/timetabling/camb/ttindex.phtml
I've just noticed that this fix makes #footer come up the page;
unfortunately it needs to stay at the bottom of the page, below
#leftcolumn. Any ideas as to how that can be achieved?
div#columns {min-height: 50em;}
... is the proper way to space down the main columns and push footer
into proper position. The actual value tuned to something suitable.
However, now we enter the world of browser-weaknesses once more, since
neither IE/win nor Safari or IE/Mac understands 'min-height'...
div#columns {min-height: 50em; float: left; width: 400px;}
@media all {
* html div#columns {height: 50em;}
}
... now IE/win is happy, but Safari and IE/Mac is left out.
So the above is no good. See it as informative, or rather normative,
but useless.
--
In order to make *all* browsers happy, we have to change slightly on the
original fix - feeding it to IE/win only.
The correct fix:
1: Take out previous fix.
2: Add this to bottom of stylesheet:
@media all {
* html div#columns {height: 50em; float: left; width: 400px;}
* html div#leftcolumn {margin-right: -163px; height: auto}
* html div#wrapper2 {height: 0;}
}
I've made use of IE/win's 'container-expansion' here, so neither width
nor height will be respected if they are too small. Thus we have
min-height and min-width in IE/win, and the footer stays down.
Opera, Moz/FF, Safari and IE/Mac will see a normal div#leftcolumn, and
make the footer stay below it. Didn't test on Mac btv.
---
So, you have a working solution - figured out through a couple of trips
across the buggy browser-land.
regards
Georg
--
http://www.gunlaug.no
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] IE: why are you so...
[EMAIL PROTECTED] wrote: Thanks a lot russ! Can I ask you (all) what do you think about my site? The address is www.itgmarinoni.it . I like it, but my Opera doesn't. :-) Think there's a missing min-width somewhere, since the background on the right column is pushed to the left on narrow windows. No other problems observed. regards Georg. -- http://www.gunlaug.no ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Other character sets/languages
Gene Falck wrote: Do you suppose Microsoft fixed Notepad when they coded Windows XP? Yes, it's pretty safe to assume that enhancements to Notepad do not get their own press release ... AFAIK, **all** my files are missing the http headers Correct, http headers are only sent by a web server. That said, installing Apache on Windows is quite simple, as long as you have an administrator account. Download it from http://www.apache.org/dyn/closer.cgi/httpd/binaries/win32/ (choose the apache_1.3.33-win32-x86-no_src.msi file), launch the installer, supply a domain name (localhost is a safe choice), a (whichever) email address and you are ready to go. Start the server, point your browser to http://localhost and a welcome page will appear. If you go to Apache's htdocs subdirectory, throw away any content and put your files there, refreshing your browser will display your very own index.htm. That's more or less all. Keep the installer for when you're going to uninstall Apache. To check the http headers you can download the standalone ViewHead from http://www.pc-tools.net/win32/viewhead, or install a Mozilla extension from http://livehttpheaders.mozdev.org (after installing and restarting the browser, rightclick, select View Page Info and then the Headers tab). After a while, you'll feel ready to play with the various config options. These are stored in a textfile called httpd.conf in Apache's conf subdirectory. Follow the instructions within the file, restart the server to apply the changes and have fun. Almost everything that works on Windows will work the same way on a Linux/Unix web server, so you may safely test at home before applying to a production server. Should you need more instructions, a default install will put a lot of useful content at http://localhost/manual. djn -- Dejan Kozina Dolina 346 (TS) - I-34018 Italy tel./fax: +39 040 228 436 - cell.: +39 348 7355 225 http://www.kozina.com/ - e-mail: [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Can I text indent on the right?
Good morning, good evening to the list Having an issue here with text which is aligned right in my navigation list on the left hand side. I want text aligned right and an indent on the right hand side. Padding doesnt to do it, margin don't do it either as the border bottom then moves in the same distance as the padding or the margin and the border stops short. (this is of course an ie problem all is fine in firefox.) Is there a trick? Something obvious i am missing? http://www.mockorange.com.au/mocksites/mintech/index2.htm any help would be appreciated or in frustration i will be sticking nbsp; in there and i dont want to do that. Cheers Jackie ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Site check (esp. Mac): One House
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of David Laakso And then along comes a *nit-picking bozzo,* still on the back of the bus, with XP_SP2, who finds that: Nit-picking is good. It helps me build better sites. Hopefully I can fix the problems. :) the fonts are much too small, that they go a little goofy on zoom in IE, Hmm... well, I run Win2k here, not XP, and I'm not sure what the differences are. The font sizes here when I'm running at my normal mode (IE's default font sizing in a 1024x768 screen) are a nice size for reading. I hadn't realised that XP might show it different... Or have you just got your set on tiny fonts? I've included here a couple of links to screenshots I made of the page, and I'd be interested to know if this is any different from what you're seeing: Mozilla: http://www.onehouseproductions.com/temp/screen_moz.jpg IE6: http://www.onehouseproductions.com/temp/screen_ie.jpg Is that a great deal larger than what you get? And I'm not entirely sure what you mean about them going goofy on zoom. What happens exactly? that the layout breaks on zoom in IE accessibility mode, and that Which part of the layout? And how badly? Any chance you could send me some screenshots off list? Best email is [EMAIL PROTECTED] at the moment. there's no available horizontal navigation available when images are disabled in FF, or Opera. Really? Hmm... confuzzled now. I would have thought that even with images off the text would still be available since the actual links in the navigation are just text. Any suggestions about how I can fix this? And it's a long, long, scroll to get to the content in Lynx. That's true. I'm not sure how else to manage it though. What are the disadvantages of absolutely positioning the content block so that I can have it first in the source? Also, you may notice that in the IE screenshot above, there's a white space between the top bar with the navigation and the next bar with the banner. I can't figure out how to make it go away. If anyone has any suggestions, it would be greatly appreciated. Once again, site is at: http://www.onehouseproductions.com CSS: http://www.onehouseproductions.com/_styles/main.css http://www.onehouseproductions.com/_styles/mainNav.css Cheers, Seona. __ ella for Spam Control has removed Spam messages and set aside Later for me You can use it too - and it's FREE! http://www.ellaforspam.com attachment: winmail.dat
[WSG] Problem with -moz-border-radius
Hey List, -moz-border-radius, seems to cause some issues with the width of the container. As it would seem, my DIV seems to be 1px thinner when I apply a border radius. www.simplyrewarding.net I was going to say, if you use FireFox use the WebDevToolBar to edit the CSS and add the rounder borders to the bottom of the content box... But as soon as you open the CSS Editor it screws up the site for some reason... I get a double border between the nav and the content. and the RIGHT border is missing on a few elements. Can anyone assist me here?? Thanks! - Chris ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE: why are you so...
[EMAIL PROTECTED] wrote: Thanks a lot russ! Can I ask you (all) what do you think about my site? The address is www.itgmarinoni.it . I like it, but my Opera doesn't. :-) Think there's a missing min-width somewhere, since the background on the right column is pushed to the left on narrow windows. No other problems observed. regards Georg. -- http://www.gunlaug.no *** Ok, thanks. I confess that I know there's this problem with Opera, but I've never understood how to fix it. You say there's a min-width missing: I'll check it soon. Thanks a lot, Piero. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
