Re: [WSG] Safari Lightening Entire Background Image - FIXED
So the problem was resolved with the re-saved images alone, or in concert with changes to the CSS? No change to the CSS. This has me baffled as I had already tried resaving all the images but I don't really have the time to figure it all out - I'm just thanking the web design gods that it all worked out and going about my merry way. ;o) Mani Sheriar Founder, Sheriar Designs www.ManiSheriar.com | 925.914.0741 ** 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] Safari Lightening Entire Background Image
Hey all, Im having a slightly maddening problem that appears to be only in Safari. The test page is here: http://www.manisheriar.com/sparkplug/paywi/ On Firefox and IE all seems good, but in Safari the grays of the main background image are too light and therefore clashing with other images where it is supposed to blend. See screenshot here: http://www.manisheriar.com/sparkplug/paywi/_images/paywi.png All these images were sliced from the same flattened psd. At first I thought it might be some weird problem with jpg vs. gif but I resaved everything to be jpg and the issue is still there. Nor is it background vs. foreground ... the lock image is foreground but the nav buttons are background. Arrrggghhh!!! Anyone have any thoughts? THANK YOU in advance!!! Mani Sheriar Founder, Sheriar Designs www.ManiSheriar.com | 925.914.0741 ** 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] Safari Lightening Entire Background Image
Just to answer some of the points made thus far The large background image, which has been rendered too lightly, as well as the sign in button, the lock image, and the nav buttons, which render correctly (ie, more darkly) were all saved from the same file using the same settings. And I have tried resaving them all more than once to make triple sure! The images which are the culprits are all jpgs, not pngs. Originally they were some jpg and some gif and I thought that might be the problem so I changed them all to jpg but that didnt solve anything. The fact that the screenshot is a png has nothing to do with the issue its just a screenshot. Most importantly though, this is not an issue of colors rendering differently across various browsers IN GENERAL, but rather an issue of Safar rendering different images which were sliced up from the same original image differently FROM EACH OTHER. So in Safari images lying next to each other do not flow seamlessly as they do in the other browsers (on both mac and pc). Thanks so much for your help!! Mani Sheriar Founder, Sheriar Designs www.ManiSheriar.com | 925.914.0741
Re: [WSG] Safari Lightening Entire Background Image - FIXED
Thanks all, especially Nick Cowie who seemed to really look into this thing! I dont know how I did it but its fixed. I just resaved all the images AGAIN and somehow the problem went away. What a strange experience. Anyway many thanks again. =) Mani Sheriar Founder, Sheriar Designs www.ManiSheriar.com | 925.914.0741 ** 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] two column
This works as long as the side column is shorter than the main column.
View it here: http://www.manisheriar.com/wsg/twoColumn/
html:
div id=container
div id=header
h1This is the Head/h1
/div!-- end head --
div id=wrapper
div id=content
h2This is the content./h2
... several paragraphs here ...
/div! -- end content --
div id=sidebar
h3This is the sidebar/h3
... list here ...
/div!-- end sidebar --
/div!-- end wrapper --
div id=footer
h4This is the footer/h4
/div
/div!-- end container --
css:
body {
font:normal .9em/1.2em Verdana,Arial,Helvetica,sans-serif;
color:#333;
padding:20px 40px;
background-color:#33;
}
#container {
border:10px solid #fff;
}
#header {
background-color:#FFCCFF;
border-bottom:10px solid #fff;
padding:20px;
}
#wrapper {
position:relative;
background-color:#99;
}
#content {
margin-left:160px;
background-color:#CC;
padding:20px;
border-left:10px solid #fff;
}
#sidebar {
position:absolute;
top:0;
left:0;
width:140px;
padding:10px;
font-size:90%;
}
#footer {
clear:both;
border-top:10px solid #fff;
background-color:#99;
padding:20px;
}
HTH,
Mani
Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925.952.4365 (landline) | 925.914.0741 (cell)
**
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] two column - CORRECTION
Oops - always test in IE before posting, eh? ;~)
Changed the css code of sidebar to:
#sidebar {
position:absolute;
top:0;
left:0 !important;
left:-190px;
width:140px;
padding:10px;
font-size:90%;
}
To deal with IE.
Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925.952.4365 (landline) | 925.914.0741 (cell)
**
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 Showing Transparent - FIXED (sort of)
Again I am sorry for causing all this disharmony in the group. It was not my intention I acted without thinking as much as I should about it. I should have alerted you folks that there was questionable content. Anyway, if any of you are interested in the actual xhtml/css problem, this is my solution: I never could solve why IE was behaving that way BUT Since the problem is really only with the top buttons (those are the ones that are set against a grey background), I gave the paragraph that contains them a class of first (in addition to its class of btn) and then in the stylesheet gave p.btn.first a background of #e4e4e4 (light grey). Voila! Mani Sheriar Sheriar Designs | www.ManiSheriar.com
[WSG] IE Showing Transparent Corners of Images as White - Until You Scroll Away and Come Back!
Hi All,
Please look here: http://www.manisheriar.com/form/vr/category_medicinal.htm
to see an example of this problem.
The two buttons (view site and full review) have transparent corners.
But in IE (not FireFox, of course) the top corners initially show up as
white, until you scroll away from them and the scroll back.
But then, if you hover over them, the hovered images have the white corners
and then once you mouse out the white corners are back! (Until you scroll
away and come back again then they are gone
again.)
Huh???
The html is this:
p class=btna href=# class=visitspanVisit Site/span/a a
href=# class=reviewspanFull Review/span/a/p
And the css is this:
#maincol p.btn {
float:right;
width:207px;
}
#maincol p.btn a {
display:block;
height:25px;
float:left;
}
#maincol p.btn a span {
display:none;
}
body.medicinal a.visit {
width:90px;
background:transparent
url(../images/general/buttons/medicinal/visitSiteBtn_off.gif);
margin-right:4px;
}
body.medicinal a.visit:hover {
background:transparent
url(../images/general/buttons/medicinal/visitSiteBtn_on.gif);
}
body.medicinal a.review {
width:113px;
background:transparent
url(../images/general/buttons/medicinal/reviewBtn_off.gif);
}
body.medicinal a.review:hover {
background:transparent
url(../images/general/buttons/medicinal/reviewBtn_on.gif);
}
Thanks in advance for any help!!
Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925.952.4365 (landline) | 925.914.0741 (cell)
**
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 Showing Transparent - APOLOGY
Ted said: If you are going to ask for help working on a project that is questionable, you should warn people in advance. Just say, hey, I'm working on an internet gambling site and I'm having a problem. That would save a lot of us from having to answer the firewall police as to why we were surfing for something we aren't supposed to look at in the workplace. And he was very correct. I offer my full apologies to the list, and particularly to anyone who was offended. But I do still need help with this issue if anyone can look past the questionable material. ;~) Thanks! Mani Sheriar Sheriar Designs | www.ManiSheriar.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 **
[WSG] Interesting problem with a fixed nav ... small window doesn't allow scrolling to see all content
Hi All,
I am currently working on this site:
http://www.manisheriar.com/willen/home.htm - xhtml and css validate.
Initially I had it so that the logo, main image on the left, and links all
scrolled with the content. However, I recently started playing around with
the idea of these elements being fixed and only the content scrolling.
Since IE doesnt support fixed elements I have ended up with this in my css
for the 3 elements in question (using the !important declaration to feed
different values to Moz and IE):
body { /* -- keeps the William Lenihan logo fixed for Moz browsers /
scrolling for IE -- */
background:#000;
text-align:center;
font:normal 1em/1.3em Times New Roman,Times,serif;
background:#000 url(../images/willen.gif) no-repeat top left;
background-attachment:fixed !important;
background-attachment:scroll;
}
#leftCol { /* -- keeps the main image on left fixed for Moz browsers /
IE ignores this -- */
float:left;
width:200px;
height:601px;
background:url(../images/street.jpg) no-repeat top left;
position:fixed;
}
#nav { /* -- keeps nav buttons on right fixed for Moz browsers /
floats the nav buttons right for IE -- */
position:fixed !important;
position:relative;
float:none !important;
float:right;
right:7.5% !important;
right:auto;
text-align:left;
}
Ok, so everything is working great - The entire page scrolls in IE and only
the content scrolls in moz ... just like I wanted! EXCEPT: If I resize my
moz browser window to 800x600 then I cannot see all of the nav buttons ...
the bottom ones get cut off. And I cannot scroll to see the rest since the
content is fixed.
I would strongly prefer not to have to decrease the height of the nav
buttons - I really like the square presentation. Ideally, I would really
like to keep the fixed content, but be able to scroll when necessary to see
the entirety of the nav buttons when the browser window is small. Any
suggestions?
Thanks in advance!
Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925.952.4365 (landline) | 925.914.0741 (cell)
**
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] Two images on the one line
Thanks for that. It looks nice in Firefox but doesn't work in IE6.
Grrr ... our friend IE - gotta love it!
I amended the paragraph declarations like so:
.left p, .right p {
padding:4px 0 8px 0;
margin:0 0 4px 0;
text-align:center;
font:bold .8em/.8em verdana, arial, sans-serif;
color:#666;
}
Now it's good in ff and ie - check it out:
http://www.manisheriar.com/wsg/twoImages/
Although now I'm rather liking the put it all in a paragraph idea ... less
divitis ;o) But I wanted to fix up this demo anyway.
Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925.952.4365 (landline) | 925.914.0741 (cell)
**
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] Peekaboo Bug giving problems
Hi Mike, I often find that simply adding position:relative to my style declarations for a problematic peekaboo element will take care of it. Worth a try. Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925.952.4365 (landline) | 925.914.0741 (cell) ** 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] {Spam?} css layout review request
As a start, try adding overflow:auto to the definitions of your container div. Then lets see whats going on after that. Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925.952.4365 (landline) | 925.914.0741 (cell) ** 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] absolute positioning in IE
Right now for the image in question you have: style=position: absolute; top:-5px; right:5px; In FF it appears as you would like it, but in IE it looks like it is a bit too close to the right edge, no? Try something like this: style=position: absolute; top:-5px; right:5px !important; right:10px; IE, since it ignores the !important declaration, will read 10px all other browsers will read 5. Worth a shot if you still need to fudge with the exact placement. Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925.952.4365 (landline) | 925.914.0741 (cell) ** 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] PLEASE HELP! No scroll bars in IE, and floats funky in IE as well (grrrrr .... I'm hating IE right now!)
Everything is cool in FireFox (of course) but no scroll bars in IE at all! Please help Im supposed to upload this for my client TODAY. THANK YOU Problem page: http://www.manisheriar.com/livewrong/index.htm CSS: http://www.manisheriar.com/livewrong/css/liveWrong.css Oh, and while youre poking around in there, can anyone tell me why my product divs arent floating correctly on the Products page (http://www.manisheriar.com/livewrong/products.htm). To see how they should be, just view in FireFox. The two coming soon sections and the view cart image should be up to the right of the bracelet section, not below it. Thanks again!! Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] PLEASE HELP! No scroll bars in IE, and floats funky in IE as well (grrrrr .... I'm hating IE right now!) UPDATE: floats fixed
Got the Product div stuff figured out (had to do with applying display:inline to the form which contained the add to cart paypal image). But still desperately need the scrollbar help! Thanks! Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 image001.gif
Re: [WSG] ie INSANITY ... please help me
note to all: IF IN DOUBT, add position:relative; -- it fixes many, many IE bugs :) POSITION:RELATIVE ... EUREKA! I feel like such an eejit - I should have known! I have already taken to adding position:relative to all my main divs, don't know why I didn't think of it as a first step towards debugging lower level elements. Argh! Thanks for the tip, Andrew. You saved my bacon! Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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 INSANITY ... please help me
Hi All, I am having SUCH a bizarre experience with IE. I thought I'd seen it all with that browser, but it still manages to fry my brain anew ... I have developed a site using valid XHTML and CSS, which can be seen here: http://www.manisheriar.com/queenbee/ Everything is working smoothly in FireFox and, with just a bit of tweaking, in IE too - EXCEPT ... The H1 for the first article (at the top left) does not display in IE. It does not show up at all, even though the code is exactly the same as it is for the following two articles. What shows up is just blank white space. As if that weren't enough, EVEN STRANGER ... The icon (small arrow) for the H2 (showing the author's name) shows up when the page first loads, but not after one has scrolled down and then back up. After that it disappears. Huh?!?!?! Once again, the code in this first article div is exactly the same as the following ones. I am baffled and simply at a loss. The code is pretty simple and straightforward and I cannot see anything that could be causing these oddities. What is going on here? Can anyone help me before I need to be put in a padded room? THANKS! Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] QueenBee site check please!!!
Good Day All, I'm developing a new site and was wondering if you guys could take a look at the initial layout. It's a bit more complicated than I tend to do with xhtml/css and I'm wondering how it's holding up so far. I welcome any feedback. Thanks! Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] QeenBee Site Check Please!!! (WITH URL)
Lol, I'm tired. Sorry guys!! Here it is ... http://www.manisheriar.com/queenbee Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] border order
Hi There,
Just use a background image for the nav border. I made one that was
760x20 with no repeat, but it could even be 1x1 and repeat y. Just
position it at the bottom.
You can look at the page here:
http://www.manisheriar.com/wsg/borderOrder/
Here's the code:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
titleBorder Order/title
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
/
style type=text/css media=screen
/* this is the ul */
#navlist {float:left;width:760px;padding:4px 0;margin:0;font: bold 12px
Verdana, sans-serif;background:#EBEBEB url(bottomBorder.gif) no-repeat
bottom;}
#navlist li {display:inline;list-style:none;margin:0;padding:0;}
#navlist li a:link, #navlist li a:visited {color:#737577;padding:3px
0.5em;margin-left:3px;border-bottom:none;text-decoration: none;}
#navlist li a:hover {color:#fff;background:#737577;
border-color:#BCBEC0;}
#navlist li a#current {color:#A11D55;border:1px solid
#BCBEC0;background:#fff;border-bottom:2px solid #fff;}
/style
/head
body style=background:#fff
ul id=navlist
li id=activea href=# id=currentHome/a/li
lia href=#News amp; Media/a/li
lia href=#Members/a/li
lia href=#Products amp; Services/a/li
lia href=#About PIR/a/li
lia href=#FAQ/a/li
/ul
/body
/html
Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925|914.0741
**
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] Gap in IE
This is a very general response to your first problem (the gap in ie). I havent looked at your code, and there is very likely a better way to solve it, however I often find that I run into some small rendering difference such as this one in IE and on no other browser. In these kinds of cases, if I cant easily solve the problem, I often resort to a little targeting hack that looks something like this: margin:0 !important; margin:-2px 0 0 0; IE ignores the !important declaration and obeys the second margin declaration. More compliant browsers give a top-margin of 0 and IE moves the block up 2 pixels. Hope this helps. Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741
[WSG] The Designer Is Dead, Long Live The Designer!
Hey All, I thought this was an interesting article from Digital Web Magazine: http://www.digital-web.com/articles/the_designer_is_dead/ It speaks of the importance of design and its effects on usability and *perceived* usability. Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] Sliding div, suckerfish nav, and general site check please!
Greetings All, I have a client that wanted me to completely redo a table-based site he has using css positioning with an eye towards standards compliance (dont you wish there were more of those clients?!). The page he gave me to work from is: http://dev.cmhhike.com/ He wanted to preserve the function of the drop down nav, which was image-based using heavy scripting, but wanted it to be list- and css-based. He also wanted the page to be centered. And he needed to preserve the drop down pop-up box thing, but he wanted to have it positioned differently. I used the Son of Suckerfish Dropdowns article (http://www.htmldog.com/articles/suckerfish/dropdowns/) as a jumping-off point for the nav work. Then I used a Slide Layer Dreamweaver extension (http://dmxzone.com/ShowDetail.asp?NewsId=3484) by Marja Ribbers (http://dmxzone.com/myZone.asp?userid=8884) to create the sliding behavior of the pop-up. The reworked page can be seen here: http://www.manisheriar.com/kevjo/cmh/index.htm I have tested it in FF and IE on the PC and was wondering if I could get feedback from users of other browsers and platforms. And any other feedback about usability or anything else would be appreciated. Ive never used these techniques before and Im just not sure how kosher they are. I know that one issue is that the far right menu, when hovered over, if it extends past the width of the browser than you get a horizontal scroll bar and no easy way to reach the sub-nav lists. Ive also heard that things arent working quite right in Mozilla on the Mac, but havent had any details on this. If you do spot problems, screenshots would, as usual, be greatly appreciated. And even more greatly appreciated would be any ideas on how to fix the problems! Thanks SO much everyone! Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] Web site review please
John, I think you have done a marvelous job. And I agree with what you said, I am using 0.8em, which is resizeable, and that is equal, for example in IE with 12,8 px. I dont see why that should be a problem. However of course if someone can enlighten me Id love to learn. ;o) I increased and decreased the font quite a bit in FF and IE on the PC and it worked just great. I also took the window size up and down and it held up quite well in all but the smallest dimensions. I do agree, however, that the hovered-links are just a bit jarring. Perhaps something a little easier on the eyes would be preferable ... but that's just my opinion. Great work! Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] Sliding div, suckerfish nav, and general site check please!
So I hear from one kind list member that on Safari the secondary nav lists are leaving little bits of themselves on the screen. Very strange. Ive posted the screenshot he sent me of it here: http://www.manisheriar.com/kevjo/cmh/safari.htm Does anyone have any ideas as to why this is happening? THANKS! Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741
[WSG] Imaginary Borders
First off try using hex for your colors instead of color
names. Next, remove the bottom border
from the row1 so that it doesnt override the top border from row2. The resulting code worked for me and looks
like this:
!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;
xml:lang=en lang=enhead
titleTable
Jazz/title
meta
http-equiv=Content-type content=text/html; charset=iso-8859-1 /
style type=text/css
media=screen
th{ text-align: center; font-weight: bold;}
th{ vertical-align: baseline; background-color: #00f;}
td{
vertical-align: middle;}
table {
border-collapse: collapse;}
tr#row1
{border-top: 3px solid #00f; background-color: #999;border-right: 3px solid
#00f; background-color: #999; border-left: 3px solid #00f; background-color:
#999}
tr {border-collapse:none;}
tr#row2
{border-top: 1px solid #000;}
tr#row3
{border-top: 1px solid #000;}
caption {
caption-side: top; font-size: 12px;}
/style
/head
body
table summary=w3.org sample table
captionThis is a simple 3x3
Table/caption
tr
id=row1
thHeader1/th tdCell 1/td tdCell 2/td
/tr
tr
id=row2
thHeader2/th tdCell 3/td tdCell
4/td
/tr
tr
id=row3
thHeader
3/th tdCell 5/td
tdCell 6/td
/tr
/table
/body
/html
Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925|914.0741
Re: [WSG] Another Zen Garden Entry
Thanks, Charles! Just to put in my two cents about the wasted space issue In general, I actually prefer fixed layouts to fluid. I have a wide monitor and when divs take up all the available space on it they are often unwieldy to read, not to mention less attractive. The exception, I guess, is when there is a LOT of content, and it is broken up into columns within the fluid div. But, in general, I have to resize my browser window because I prefer to read shorter lines and scroll. (And I dont like having to resize my browser window.) Anyway, Im sure we cant satisfy everyone because we all have different resolutions and screen sizes and preferences and whatnot. Hey, at least we arent designing for 600 * 480 anymore! Jixor - Stephen I wrote: It just wouldn't look as nice if it was wider, its a standard characteristic of the zen designs that they are very narrow. However I think in the case of the garden that is fine because its about showing off css, not usability. You're right. :) Guess all the wasted space on the right side was bugging me, but you're right about its purpose to show off what you can do with CSS. :) Just a personal preference, but it is awesome looking. Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] Another Zen Garden Entry
Hi All, I have made another CSS Zen Garden design ... after doing my first one I just couldn't help myself - I was bit by the bug! (By the way, the second time around was sooo much easier!) Anyway, I was wondering if any of you might care to check it out and offer me any feedback on the design, especially if there are any problems on certain browsers. (But nice feedback about how much you like it and how well it works is always welcomed too.) ;~) Take a gander at it here: http://www.manisheriar.com/zengarden2/ Thanks a bunch! Mani Sheriar Sheriar Designs | http://www.ManiSheriar.com 925|914.0741 ** 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] External Links Won't Validate (URL Cleaner doesn't help)
Why have that info in an iframe? Why not just a div? (pardon my ignorance I dont know much about iframes) Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741
[WSG] Site check please!! Oh, you MAC people ... are you getting sick of me yet? ;~)
Hi All, I have another request for a site check and, once again, Mac users are especially needed. Please see: http://www.manisheriar.com/globalrocket/indexNEW.htm THANK YOU! (And, yes, I realize it's a bit cheesy ... but you should have seen the logo I was given to work with and stay as close to as possible) Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] THANK YOU! Help with centering - jumps horizontally depending on presence of vertical scrollbar
html{min-height: 100%;margin-bottom: 1px;}
Did the trick. Awesome!
Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925|914.0741
[WSG] Site Review Please! ZenGarden Submission ...
Hi All Happy New Year! I am working on my first CSS Zen Garden submission and I was wondering if you good folks might like to check it out for me and offer any feedback on the design or code. It can be viewed at www.manisheriar.com/zengarden I have checked it in FireFox, IE, Mozilla, and Netscape on the PC. Thanks!!! Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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 Review Please! ZenGarden Submission ...
Nice! :) However, I do get a horizontal scrollbar in FF1.0 and the tiling pattern for the side of the content pane doesn't match up with the top, try adjusting your background-position:; property to resolve this HTH -David R Thank for your input, David! Do you have any suggestions for getting rid of the horizontal scroll? I see it in FF too and I dont like it but cant quite figure out how to make it disappear. Also, the bg image is tiling perfectly for me in FF1.0 and in the other browsers I've checked in, so I'm not sure how to tackle that one. Would you mind sending me a screenshot offline? Anyone else having problems with the tiling? Thanks! Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] Feedback on a new website developed very quickly
Ditto everything in the above response plus I think you did a great job in such a short time-frame! Its clean and readable and looks professional. Once you take the 100% width off the tables you should be good to go. Good job! Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
what if you want one of the columns to have a border around it, say the right column. How can this be done? If you want one of the columns to have a border, then you just apply the border property to the column and your 200x1 pixel gif can have that border on it as well. Should work fine. One of the main reasons that I struggled to create this layout is so that you could have different colors for the background, header, footer, and all three columns (none of the colors are shining through from underlying elements). This can be extended to different backgrounds as well ... which is the REAL reason that I worked on this design. If you wanted some sort of fancy background for the side columns (or any element) then you would just apply that background to the column and the wrapper div. IE 5.2 OS X (Mac): extra padding added to the width of the left and right columns Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif (could be a known CSS bug related to IE implementation of box model-padding and border added to width) See: http://tantek.com/CSS/Examples/boxmodelhack.html Call for help: Does anyone have any ideas about this problem in IE 5.2 OS X (screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif). I have already implemented the box model hack, so I'm not sure what the issue could be. Anyone come up with, or implemented, a 3-column layout of this sort in which the left and right columns also stretch as a percentage of the page width? I haven't tried it yet, but one theory is to make the background repeater very long (horizontally), and set it to repeat-y, but set its x-axis start position as a percentage. I haven't tried it yet, but one theory is to make the background repeater very long (horizontally), and set it to repeat-y, but set its x-axis start position as a percentage. I actually started working on an all-liquid layout at first. I ended up going to a single-column liquid layout just because this would work better for a project I'm about to embark on. What you suggest is exactly how I planned to try to implement the backgrounds (I didn't get that far yet, though). However, I might try to follow up on the all-liquid layout just to see if it can be done. If I get to it and get it to work, I'll post it here. Quick Note: Dejan - Wow ... THANK YOU for your help. I'm sure those screen shots will be very helpful and I really appreciate your time. Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] The Holy Grail ... CSS Liquid Three-Column Layout
Hi Everyone! This is my first post to this group after reading it for a while. I must say, Im kinda scared to post to you guys! However, I really need your help. I think I may have found the Holy Grail that 3-column css liquid layout that allows for different colors and/or backgrounds for the body, the header, the footer, and the three columns NO MATTER WHICH COLUMN IS LONGEST. What I need help with is this: I have checked this out on Mozilla, FireFox, Netscape, and IE all on the pc. Can anyone who is interested please check it out on some other browsers/platforms? Also, I read the usual css blogs as much as I have time for, but Im not sure if someone else (or even several people) have already beaten me to the punch here. If not, I would take the time to write something up about it. Heres the link: http://www.ManiSheriar.com/holygrail By the way, I know that the code for the content comes after the code for the sidebars, but for accessibility concerns I could just put a skip to content link at the top, no? Anyway thanks for any feedback, and please be gentle with me. ;~) Mani (like Bonnie) Mani Sheriar Sheriar Designs | www.ManiSheriar.com
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
Checked (OK) Safari 1.2.4 OS X (Mac) Opera 6.0.3 (Mac) Netscape 7.1 OS X (Mac) Minor bugs IE 5.2 OS X (Mac): extra padding added to the width of the left and right columns Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif (could be a known CSS bug related to IE implementation of box model-padding and border added to width) See: http://tantek.com/CSS/Examples/boxmodelhack.html Thanks very much for the screenshot, Andy! I thought that I had already allowed for the box-model inconsistencies in my css code. Im wondering if 1E/MAC 5.2 doesnt like the negative margins on the side columns? Any ideas anyone? Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741
