[css-d] IE8 rendering issue

[Scott Povlot]

I need some help with a rendering problem on IE8 that does not show on other 
browsers including IE7, Firefox and Chrome. I am using an image replacement 
technique for the title header.  On IE8, there is a large gap at top of the 
image so the backgrounds don't match up.

The website is http://piedmont-div.org/pilgrimage/ .

The CSS in question is :

#header h1 {
background: transparent url(/pilgrimage/images/pp_title.jpg) no-repeat top 
left; 
margin: 0;
padding: 0;
font-size: 3em;
font-weight: bold;
overflow:hidden;
text-indent:-5000px;
height:79px;
}

The HTML is 
Piedmont Pilgrimage

I thought this might be related to a hasLayout issue.  But adding "zoom:1" did 
not seem to help. 

Any assistance would be appreciated.

Regards,

Scott Povlot


  
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS and Yahoo Maps

[Scott Povlot]

I am having some problems trying to position Yahoo Maps with CSS.  I have 
embedded an AJAX Yahoo Map (http://developer.yahoo.com/maps/ajax/) in a 
webpage.  The maps are generated dynamically with Javscript so I am not exactly 
sure what is going on.  

The map is within a container div that is floated to the right.  

You can see a sample web page at 
http://www.piedmont-div.org/pilgrimage/tour_date20081101.html .  The CSS is at 
http://www.piedmont-div.org/pilgrimage/css/styles.css .

The page looks good in Firefox.  In IE7, the mapcontainer shifts around when 
you resize the browser.  
On IE6, the map moves out of the containing box and almost off the page.  Very 
strange indeed.

Any help you can provide would be appreciated.

Scott Povlot



  
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Paragraph background not respecting float margins

[Scott Povlot]

I hope that someone can explain to me what is
happening in this case.  The paragraph with the yellow
background should be pushed over by the float.  The
text in it is moved over due to the float.  But the
yellow background still continues behind the float
box.  I think that the background and border should be
moved by the float.

Here is the URL:
http://test.nmra.org/education/achievement/def.html

Thanks for your help.


Scott Povlot

__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Page check

[Scott Povlot]

Thanks, David.

I changed the #shop width to 200px.  That's much
better.

However, I am not sure what you mean about "Eighty
percent of default (on body) is kind of tiny start
point for those using a high dpi monitor." What
resolution are you using?  What do you suggest for a
font setting?

Scott


--- David Laakso <[EMAIL PROTECTED]> wrote:

> Scott Povlot wrote:
> > The URL is
> http://www.piedmont-div.org/nmra/nmra_home_page.html

> 
> Scott,
> 
> I'd suggest setting the width of #shop from the em
> width you have to 
> around 200px (to keep it from expanding horiz and
> dropping th float w/ 
> font-scaling). The set of links at the bottom right
> corner of the page 
> break as well.
> Eighty percent of default (on body) is kind of tiny
> start point for 
> those using a high dpi monitor.
> 
> -- 
> http://chelseacreekstudio.com/
> 
>
__
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies --
> http://css-discuss.org/policies.html
> Supported by evolt.org --
> http://www.evolt.org/help_support_evolt/
> 



   

Be a better Globetrotter. Get better travel answers from someone who knows. 
Yahoo! Answers - Check it out.
http://answers.yahoo.com/dir/?link=list&sid=396545469
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Page check

[Scott Povlot]

I have just finished a new page design.  This is my
first using a fixed width page.  It looks OK on
Windows IE6/7 and Firefox.  

Can you please validate on other OS and browsers?

Also, any comments on the design would be appreciated.

The URL is
http://www.piedmont-div.org/nmra/nmra_home_page.html

Thanks very much,

Scott Povlot


  

Luggage? GPS? Comic books? 
Check out fitting gifts for grads at Yahoo! Search
http://search.yahoo.com/search?fr=oni_on_mail&p=graduation+gifts&cs=bz
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Margin vs. Padding

[Scott Povlot]

I think this is a simple question.  And perhaps there
is no straight answer.

If I don't have a border, what is the difference
between using padding or margin to add space around an
element? Is there any reason to choose one over the
other?

Thanks,

Scott


   

Need a vacation? Get great deals
to amazing places on Yahoo! Travel.
http://travel.yahoo.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] need help with css in firefox

[Scott Povlot]

Firefox does not seem to be reading the CSS file for
some of your pages such as the Home page.  This seems
to be a problem with the encoding which is set to
UTF-16LE on these pages.  You can see this by looking
at the Page Info (under Tools menu).  Other pages such
as "Contact Us" seem to be displayed OK.

This is probably a problem with your web server or how
you saved the pages.  The default encoding should be
ISO-8859-1.

Regards,

Scott Povlot

--- Matt Kruger <[EMAIL PROTECTED]> wrote:

> Hello all,
> 
> Im currently working as an intern for a reputable
> machine shop in Cleveland
> and was tasked with revamping their very basic
> website. Im still in college
> and havn't had much formal training in web
> development. I found a very cool
> CSS template online and have recently finished
> adding all the content from
> the old site.
> 
> The site is www.techmach.com   It looks great in IE
> but really poor in
> firefox and netscape. My main concern at the moment
> is getting the links on
> the top and sidebar formatted correctly, the rest I
> can test and play with
> more casually. Here is the related code from one of
> the pages as well as the
> css:
> 
> CSS:
> 
> td {
>   font-family: Arial, Helvetica, sans-serif;
>   font-size: 11px;
>   color: #343B4D; 
> }
> a img {border: none; }
> 
> 
> .menu_link {
>   font-family: Arial, Helvetica, sans-serif;
>   font-size: 11px;
>   color: #FF;
>   font-weight: bold;
>   text-decoration: none;
> }
> .menu_link:hover {
>   color: #C9C8C3;
> }
> .link_1 {
>   font-family: Tahoma, Arial, Helvetica, sans-serif;
>   font-size: 10px;
>   color: #FF;
>   text-decoration: none;
> }
> .link_1:hover {
>   text-decoration: underline;
> }
> .link_2 {
>   font-family: Arial, Helvetica, sans-serif;
>   font-size: 11px;
>   color: #FF6501;
>   text-decoration: none;
> }
> .link_2:hover {
>   text-decoration: underline;
> }
> .link_3 {
>   font-family: Verdana, Arial, Helvetica, sans-serif;
>   font-size: 11px;
>   color: #333A4D;
>   text-decoration: underline;
> }
> .link_3:hover {
>   color: #999FAF;
> }
> .searchformtd {
>   border-top: 1px solid #5E5E5E;
>   border-left: 1px solid #8D8D8D; 
>   border-right: 1px solid #E7E7E7;
>   border-bottom: 1px solid #E7E7E7;   
> }
> .caption_1 {
>   font-family: Arial, Helvetica, sans-serif;
>   font-size: 12px;
>   color: #00;
> }
> .caption_2 {
>   font-family: Arial, Helvetica, sans-serif;
>   font-size: 12px;
>   font-weight: bold;
>   color: #FF6501;
> }
> .caption_3 {
>   font-family: Arial, Helvetica, sans-serif;
>   font-size: 16px;
>   font-weight: bold;
>   color: #303749;
> }
> .inp_1 {
>   border: 1px solid #414D73;
>   width: 132px;
>   height: 22px;
>   background-color: #FCFCFC;
> }
> form {
>   margin: 0px;
> }
> .aligner {
>   text-align: justify;
> }
> .spacer_1 {
>   margin: 2px 10px 2px 5px;
> }
> .spacer_2 {
>   margin-bottom: 3px;
> }
> .spacer_3 {
>   margin: 6px 8px 6px 8px;
> }
> .spacer_4 {
>   margin: 11px 14px 11px 14px;
> }
> .text_1 {
>   font-family: Arial, Helvetica, sans-serif;
>   font-size: 10px;
>   color: #220C01;
> }
> .text_2 {
>   font-weight: bold;
>   text-decoration: underline;
> }
> .img_spacer {
>   margin-right: 9px;
> }
> 
> 
> 
> Portion from the html:
> 
>  Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd";>
> 
> 
> TMP - Hydraulic Presses, Rubber Machinery,
> Injection Presses,
> Rubber Mixers, Lamination Presses
> 
> 
> 
>  type="text/css">
> 
>  leftmargin="0" marginheight="0"
> marginwidth="0">
>  cellspacing="0" cellpadding="0">
>   
>  src="images/header.jpg"
> width="780" height="100">
>   
>   
>   src="images/header_part01.jpg" width="20"
> height="27">
>  background="images/header_part02.gif"
> style="height: 27px"> width="186"
> height="1">
>  src="images/header_part03.jpg" width="14"
> height="27">
>  background="images/header_part04.gif" style="height:
> 27px">  src="images/arrow.gif" width="9" height="5">
> 
> 
> Home    
> 
=== message truncated ===



   

Need a vacation? Get great deals
to amazing places on Yahoo! Travel.
http://travel.yahoo.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] layout column height adjustment...

[Scott Povlot]

Mike,

I suggest you look on the CSS-Discuss wiki at 
http://css-discuss.incutio.com/?page=AnyColumnLongest

Also, when you post, I suggest that you limit the use
of "...".  The URL to your website was broken because
of them.

Regards,

Scott Povlot

--- Michael Forker <[EMAIL PROTECTED]> wrote:

> Hi
> the problem
> is that with the layout
> in the pages when I put content into the various
> pages differing on each
> pagethe layout columns at the bottom of the
> pages are not equal as in on
> each page the length of the columns are diiferent on
> the different pages
> 
> the left column...middle column...right
> column.on different pages are
> different lengths.tried adjusting the top:200px;
> rule which did work at
> the bottom of the column but shifted the position at
> the top.the link to
> my site
> 


   

Pinpoint customers who are looking for what you sell. 
http://searchmarketing.yahoo.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] print label from web browser

[Scott Povlot]

Hiep,

You may be able do to this in CSS if you restrict the
format to fixed width fonts with text only.

This may work for a dot matrix printer.  But for
anything that requires specific layout such as laser
print multi-column labels, I would suggest looking
into a server-side solution that creates a PDF.  You
can google pdf and php to find more information on
this.

Regards,

Scott Povlot



--- Hiep Nguyen <[EMAIL PROTECTED]> wrote:

> hi there,
> 
> i'm writing a simple web application using mysql &
> php.  what i want is to 
> do allow users to print continuous label (7.5x3.5
> in) on dot matrix 
> printer.
> 
> my question is can css do this?  If so, can some one
> gives some advises or 
> point me to the right direction.
> 
> thank you,
> T. Hiep
> 



   

Boardwalk for $500? In 2007? Ha! Play Monopoly Here and Now (it's updated for 
today's economy) at Yahoo! Games.
http://get.games.yahoo.com/proddesc?gamekey=monopolyherenow  
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floated Images disappear in IE6

[Scott Povlot]

Thanks very much, Georg.

Just wondering how you determined this (so that I can
learn a little for next time).  Is this a documented
bug? Any links you can provide would be helpful.

Regards,

Scott

--- Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:


> Nothing to do with the box model, but everything to
> do with IE6' faulty stacking of elements.
> 
> The addition of...
> img.layout {position: relative;}
> ...will make that bugger come to its senses.
> 
> regards
>   Georg



   

Pinpoint customers who are looking for what you sell. 
http://searchmarketing.yahoo.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Floated Images disappear in IE6

[Scott Povlot]

I recently redesigned one of my websites.  Now some
images (floated right) are no longer showing on
Internet Explorer 6 (IE6).  I think this may be a box
model issue.  But the hacks I have tried haven't fixed
it.  This site works in IE7 and Firefox.  Can someone
please help me fix this?

The page :
http://www.piedmont-div.org/pilgrimage/layouts/layout_tweldon.html

CSS:
http://www.piedmont-div.org/pilgrimage/css/styles.css

Also, any comments on the design are appreciated.

Regards,

Scott Povlot
[EMAIL PROTECTED]


  

Shape Yahoo! in your own image.  Join our Network Research Panel today!   
http://surveylink.yahoo.com/gmrs/yahoo_panel_invite.asp?a=7 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] multiple style sheet errors

[Scott Povlot]

Copeland,

This is not a CSS problem.  Your problem is related to
the Javascript that disables the stylesheets.

In Firebug, I see the following error:

document.styleSheets is not a function
[Break on this error] document.styleSheets(1).disabled
= false;

Basically, styleSheets is an array and needs to be
referenced using square brackets [ ] instead of
parentheses.

Regards,

Scott Povlot

--- Copeland <[EMAIL PROTECTED]> wrote:

> I have javascript that says to go to the first
> stylesheet unless the user
> wants larger text at which point they go to another
> linked stylesheet that
> is otherwise disabled.
> 
> BUT when I link those two stylesheets next to each
> other the main content
> area goes -boom- all the way down the page. 
> 
> These 2 stylesheets are named differently but I also
> tried it with the same
> stylesheet, just listing it twice (so nothing should
> change) and it did the
> same thing!
> 
> Anyone have any ideas???
> 
> You can see it at 
> HYPERLINK
> "http://www.messiahvillage.org/indexnew.htm";


  

Shape Yahoo! in your own image.  Join our Network Research Panel today!   
http://surveylink.yahoo.com/gmrs/yahoo_panel_invite.asp?a=7 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Repeat-x problems when the window is smaller than 800x600

[Scott Povlot]

Erik,

The problem you are having is not related to repeat-x,
but width.  Your "subwrapper" div has a fixed width of
780px.  Your body has a min-width of 100%.  But the
body width does not take into account the width of the
subwrapper.  (Not 100% sure why).  If you change the
body min-width=780px, the problem is resolved. 
Perhaps someone else can explain why 100% does not
work properly.

Scott
--- Erik Gyepes <[EMAIL PROTECTED]> wrote:

> I'm designing a layout where the /header/ and also
> the /banner/ (under 
> it) use repeat-x to be repeated on the "x" axis.
> 
> The problem occurs when I resize the window to
> 800x600 to see how it 
> looks like on 800x600 desktop and then resize the
> window a little more - 
> because I want a horizontal scrollbar to appear.
> Then when I scroll 
> horizontally to right there is a gap on the right
> side of the /header/ 
> and the /banner/.
> 
> I would like to repeat the header and the banner
> till to the window 
> border, but it just stop repeating.



   

Choose the right car based on your needs.  Check out Yahoo! Autos new Car 
Finder tool.
http://autos.yahoo.com/carfinder/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Tabular Layout

[Scott Povlot]

Jason,

Both Photos and Members Online are simple lists.  A list of images and a list 
of users.  So, use a unordered list ().  You can float the list items to 
make a multi-column display.

For example:

Members Online

steve0727
whatsis
audiosl_99
...





CSS:
ul#online {

list-style-image:none;
margin: 0;
padding: 0;
}


ul#online li {
float:left;
width:20em;
}


Regards,

Scott Povlot

Jason Ogle <[EMAIL PROTECTED]> wrote:
What is the ideal way to layout the "Photos" and "Members Online"  
sections??



 
-
 Get your own web address.
 Have a HUGE year through Yahoo! Small Business.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Rollovers (hovers) not working in Firefox

[Scott Povlot]

Kathi,

The problem is related to the absolute positioned title that is blocking the 
menu items.

Here is the CSS fix that changes the title to relative positioning.

#pagetitle_ma
{
left:250px;
position:relative;
top:120px;
width:540px;
}


Regards,

Scott Povlot

- Original Message 
From: Kathi Cushman <[EMAIL PROTECTED]>
To: css-d@lists.css-discuss.org
Sent: Tuesday, March 27, 2007 3:35:38 PM
Subject: [css-d] Rollovers (hovers) not working in Firefox

Hi all,

First of all, I'm fairly new to CSS and taking over for my partner, so 
there's probably a better way of doing things than the method I'm using.

On this page, my hovers for the horizontal bar of main navs doesn't work in 
Firefox, except for the first 3. I used the same code for another site that 
used horizontal navs and worked fine in all browsers. For the life of me, I 
can't seem to figure this out.

http://www.igryphon.com/microtia_final/age-to-begin.html

On a side note, the horizontal nav bar is made up of one horizontal div, 
then individual divs nested in it for each nav "button." I would rather 
have had the buttons all in the one larger div, but I couldn't get them to 
display in a row, even when I changed "display: block" to "display: inline."

If you have any input I'd sure appreciate it.


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/







 

Finding fabulous fares is fun.  
Let Yahoo! FareChase search your favorite travel sites to find flight and hotel 
bargains.
http://farechase.yahoo.com/promo-generic-14795097
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] A huge space in IE... any reason why?

[Scott Povlot]

Well, I am not 100% sure what the problem is.  Maybe it is related to this IE6 
float problem (http://www.positioniseverything.net/explorer/doubled-margin.html)

But this will fix the problem.

form {float: left;}

This is a sort of ''fix a float with a float'' solution.  
(http://www.complexspiral.com/publications/containing-floats/)

Regards,

Scott Povlot

- Original Message 
From: Michael Stevens <[EMAIL PROTECTED]>
Subject: [css-d] A huge space in IE... any reason why?

www.jimbarnettconsulting.com/contact.html
www.jimbarnettconsulting.com/short_form.html
 
www.jimbarnettconsulting.com/jbc.css
 
Of course, it's fine in FireFox...
 
Every page on the site is identical except what's between the content DIVs.
The only difference on these pages is the form in use. I did validate it and
fixed some errors with where the input elements were placed but, as I knew,
that didn't solve anything.
 






 

Expecting? Get great news right away with email Auto-Check. 
Try the Yahoo! Mail Beta.
http://advision.webevents.yahoo.com/mailbeta/newmail_tools.html 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why won't my class change the font?

[Scott Povlot]

>>http://www.mocap.com/_temp/insidepage.asp



>>I can't figure out why the text on the right side, which has a class of

>>"smallcaption", is not 8pt? For some reason, the font of of the article

>> class seems to over-ride smallcaption.


The problem here is CSS specificity.  Your ".smallcaption" class is overridden 
by the ".article p" which also sets the font size.  If you change your 
".smallcaption" to "p.smallcaption" or  add another version such as ".article p 
.smallcaption", your problem will be solved.



>>Also, can someone tell me how to make the underline stop showing up when

>>hovering over the free samples button and the size charts button? This

>>causes the page to grow and shrink in FF. :(


Change your a:hover to remove the bottom border as follows:

a:hover {
border-bottom:0;
text-decoration:none;
}







Regards,

Scott Povlot








 

Don't pick lemons.
See all the new 2007 cars at Yahoo! Autos.
http://autos.yahoo.com/new_cars.html 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] "Floating Absolute" Positioning

[Scott Povlot]

Cody,

Basically, absolute positioning and variable font sizes don't mix.  I would 
suggest that you try the layout without absolute positioning.  You can easily 
do this by removing the "position: absolute" and "top" attributes and changing 
"left" to "margin-left".  Then you can set a min-height (and height on IE) to 
the appropriate size that you choose.  Then everything will be in the normal 
document flow. (Oh, you might need to move your image on the left to a float or 
a background.)  And the thumbnails will only move down if the text gets larger 
than the min-height.

Regards,

Scott

- Original Message 
From: Cody Thornton <[EMAIL PROTECTED]>
To: css-d@lists.css-discuss.org
Sent: Friday, January 5, 2007 12:27:16 PM
Subject: [css-d] "Floating Absolute" Positioning

At this site http://www.matthew-cunningham.com/frontridge/project.html there is 
a row of thumbnail images that risk overtaking the text if the viewer has the 
font size set larger than normal (the text wraps under the thumbnails).

I want the absolute position of the row of thumbnails to hold among all of the 
projects EXCEPT in the rare case that the text is too large to fit in that 
space.  You can see what I mean by clicking on the project arrows to go from 
project to project.

Is there a way to give those thumbnails an "absolute" position except when it 
needs to be pushed down?

Thanks in advance!  I'm very new to CSS.

Cody
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/






__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problem overlap in IE7 (PLEASE)

[Scott Povlot]

I think that my email may have been lost in the shuffle when the list was down. 
 Can someone please help me with this problem on IE7?

Thanks!
Scott

- Original Message 
From: Scott Povlot <[EMAIL PROTECTED]>
To: css-d@lists.css-discuss.org
Sent: Wednesday, January 3, 2007 2:15:55 PM
Subject: [css-d] Problem overlap in IE7

I need some help on IE7.  I have a website that works well on IE6, FF and 
Opera.  But on IE7, the content text overlaps the sidebar on the right.  The 
content area has a 13em right margin.  And the sidebar ("Upcoming Events") is 
positioned absolutely at the right on 0.


Website: http://www.piedmont-div.org/
CSS: http://www.piedmont-div.org/css/styles.css


Any suggestions on fixing this problem in IE7 would be helpful.

Thanks,

Scott 






__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/






__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Dotted Box

[Scott Povlot]

The dotted box is the focus that appears on the current link.  If you tab 
around the browser, you will notice that this moves to each link.  There is not 
a simple way to remove this.  And if you do, you may have a 
usability/accessibility problem.

There is a solution available on CSSPlay at Removing active/focus state borders 
(http://www.cssplay.co.uk/menu/nodots.html).  But this seems more complicated 
than what it's worth, IMHO.

Scott

- Original Message 
From: Steve LaBadie <[EMAIL PROTECTED]>
To: css-d@lists.css-discuss.org
Sent: Friday, January 5, 2007 9:12:02 AM
Subject: [css-d] Dotted Box

Is there away to prevent the dotted box that appears around a link after
you click on it?  If I refresh the page it goes away.

 

Steve LaBadie, Web Manager
East Stroudsburg University
200 Prospect St.
East Stroudsburg, Pa 18301
570-422-3999
[EMAIL PROTECTED]  
http://www.esu.edu  

 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/






__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Changing cursor for image maps

[Scott Povlot]

Don, 
...
  I have tried adding a class and an id and even a span but none will change 
the cursor type on an image map link.
...






__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Changing cursor for image maps

[Scott Povlot]

Sorry about the last message.  Adding a class to the  seems to work in Firefox. 
 But not on IE.  You might try some other option instead of an image map.  See 
http://www.alistapart.com/articles/imagemap/ for an example.

Scott


__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Problem overlap in IE7

[Scott Povlot]

I need some help on IE7.  I have a website that works well on IE6, FF and 
Opera.  But on IE7, the content text overlaps the sidebar on the right.  The 
content area has a 13em right margin.  And the sidebar ("Upcoming Events") is 
positioned absolutely at the right on 0.


Website: http://www.piedmont-div.org/
CSS: http://www.piedmont-div.org/css/styles.css


Any suggestions on fixing this problem in IE7 would be helpful.

Thanks,

Scott 






__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] first posting

[Scott Povlot]

Ana,

Basically, you have several "ul li" rules that override each other.  To make 
them specific to the globalNavi or subNavi, you need to make them more specific 
with a descendant selector.  For example:

#globalNavi ul li {
  margin: 0;
  padding: 0;
}


I would suggest that you review some tutorials on CSS selectors.  I suggest 
Selectutorial (http://css.maxdesign.com.au/selectutorial/index.htm) or WestCiv 
(http://www.westciv.com/style_master/house/index.html).

Also, regarding the order of your items in the globalNavi, the problem is that 
the individual  are floated right.  I think that you just want to float the 
 to the right.  But leave the  alone.

Let us know if you need more assistance.

Regards,

Scott Povlot

- Original Message 
From: Ana Aguilar <[EMAIL PROTECTED]>
To: css-d@lists.css-discuss.org
Sent: Thursday, December 7, 2006 10:32:47 AM
Subject: [css-d] first posting

Hi there,
I am working on a portfolio-kind-of page and got a couple of problems I don't 
know how to solve.
1. I have two navis one I called globalNavi, and another subnavi .
Somehow when I modify the subnavi, the globalNavi gets modified as well and I 
dont want that. How can I modify the subnavi so it acts independent of the other
navi? where is/are the mistake(s)?
2. Why is the order in my globalNavi not working? If you notice in the code 
whatever I have in the first li (home) appears on the last tab!
the layout:
http://preview.aguilar-hauke.de/Sites/test/print.html
the css:
http://preview.aguilar-hauke.de/Sites/test/styles/master.css

Could someone help me, please?

Thanks 

Ana

 
-
Have a burning question? Go to Yahoo! Answers and get answers from real people 
who know.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/







 

Need a quick answer? Get one in minutes from people who know.
Ask your question on www.Answers.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Applying CSS to forms

[Scott Povlot]

The simplest solution seems to be to remove the "float:right" and 
"display:block" from the label.  

label { width: 100px; text-align: right; margin-right: 10px; }

Generally, I would suggest working with the base styles as much as possible 
before using floats to change the layout.  By setting the float, you moved only 
the labels out of the normal flow of the document.  The inputs were still in 
the normal flow.  You could have also floated the inputs left to fix this. But 
go with the normal  document flow  instead.

Also, there seemed to be a problem with your URL when you posted.  Here is the 
complete URL: http://web.asylumweb.net/FormTest.html

Regards,

Scott Povlot

- Original Message 
From: Steve Craig <[EMAIL PROTECTED]>
To: css-d@lists.css-discuss.org
Sent: Tuesday, December 5, 2006 5:46:53 AM
Subject: [css-d] Applying CSS to forms

Hi

In an effort to get rid of some more tables and streamline my code a  
bit I took a look at this page on styling forms...
http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
...and everything went well until I tried to put a couple of input  
fields side by side instead of vertically.

A sample page of the problem is here http://web.asylumweb.net/ 
FormTest.html

Anyone any ideas how I can get the surname label to sit correctly?

Thanks for any help.

Steve Craig - Asylum Interactive Ltd
Tel +44 1330 860550 Fax +44 1330 860880

http://www.asylumweb.com
Email: [EMAIL PROTECTED]
Skype: s.craig - iChat: steve.craig





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/







 

Cheap talk?
Check out Yahoo! Messenger's low PC-to-Phone call rates.
http://voice.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Floating list Elements in Nested lists

[Scott Povlot]

Bruce,

Add "clear:none" to the ul.amenities li style.  This will override the 
clear:both from the .room li style.  The problem is that you are floating and 
clearing the same li.

ul.amenities li {
float:left;
padding:0;
margin:.5em .25em;
width:45%;
clear:none;
}Regards,

Scott
- Original Message 
From: Bruce Hodo <[EMAIL PROTECTED]>
To: css-d@lists.css-discuss.org
Sent: Tuesday, September 19, 2006 10:13:13 AM
Subject: [css-d] Floating list Elements in Nested lists

I would like to have a second level nested list floated in such a way that the 
elements line up (in this case) in two columns. Doing this in a non-nested list 
works fine, but the nest lists do not float: they line up as if float was not 
coded.  The list elements have a defined width that is slightly less than half 
of the width of the ul, which should give me a two column layout. But it 
doesn't. 





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] text-align: right

[Scott Povlot]

Thanks.  That seems to work.  Can you tell me why I would need it on the in the 
parent div instead of on the  tag?

Scott

>>#header #sponsor {
>>float: right;
>>margin-right: 50px;
>>text-align: right;  /* i added this */
>>}




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] text-align: right

[Scott Povlot]

I am having a problem aligning text on the right.  Oddly, my CSS works in 
IE6/Win but is not working on Firefox.  The website is 
http://www.piedmont-div.org/ser2007/ .  In the header, there is a "Sponsor By" 
paragraph that should be right aligned.  On Firefox, the text shows as left 
aligned.


   SponsoredBy 
   http://www.digitrax.com/";>
  
   

Here is the area of the CSS 
(http://www.piedmont-div.org/ser2007/css/styles.css) that effects this XHTML.
#header #sponsor {
float: right;
margin-right: 50px;
}

#header #sponsor p {
float: left;
padding: 5px 10px;
font-size: 1.1em;
font-weight: bold;
text-align: right;
}

#header #sponsor img {
position: static;
}I am not sure if the problem is related to all of the floats.  Normally, I 
would expect Firefox to show correctly and IE to have the problems. ;-)  

Any help would be appreciated.

Scott


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Floated list items cause extra space on Firefox

[Scott Povlot]

I am working on my first CSS/XHTML website.  I hope
that you can help with an unusual problem that I am
seeing in Mozilla Firefox 1.04.

I am using a floated list item  to make multiple
columns.  This is similar to the gallery example in
http://css-discuss.incutio.com/?page=GalleryFloat. 
The problem is that I see a large gap at the bottom of
the page in Firefox.  This problem does not occur in
IE.

Here is the sample page:
http://www.piedmont-div.org/test/hobbyshops.html
CSS:  http://www.piedmont-div.org/test/css/styles.css

Here is the section of CSS that I use to make the 2
columns.

#content #board li,
#content #hobbyshops li {
width: 20em;
list-style-type: none;
font-size: 1.2em;
color: #000;
font-weight: bold;
float: left;
}

#content #board li li,
#content #hobbyshops li li {
font-size: 0.8em;
font-weight: normal;
float: none;
margin: 0;
}

Thanks very much for your help.

Scott



__ 
Discover Yahoo! 
Have fun online with music videos, cool games, IM and more. Check it out! 
http://discover.yahoo.com/online.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Print Stylesheet problem

[Scott Povlot]

Well,  I will try this post again with a different
subject and some more information.

I found that if I set absolute positioning on the
"section" div that I could fix the Firefox problem
where there is a pagebreak after the header section. 
I found this out by removing the print CSS altogether
to see the default print preview.  In that case, my
navbars showed properly.  They are positioned
absolutely on the page.  The problem CSS is still on
the website if you want to see the problem.

However, I don't think this solves my problem 100%. 
Some text still seems to run off the end of the page.
Are there known CSS print problems with Firefox?

Also, my text is still missing on IE when positioned
next to my floated images.

Website: http://www.piedmont-div.org/test/
CSS: http://www.piedmont-div.org/test/css/styles.css

Thanks very much for your help.

Scott


--- Scott Povlot <[EMAIL PROTECTED]> wrote:
> I am having some problems with my print CSS.  I am
> hoping that someone on the list will be able to help
> me.
> 
> I have two different problems.  On Firefox, the
> header
> section prints on a separate page than the content. 
> I
> cannot figure out why.  I have tried changing
> margins
> and padding on multiple sections without success.
> 
> On IE, the header and content print on one page. 
> But
> on the home page, the photo captions disappear. 
> Again, I am not sure why.
> 
> My print CSS removes navigation areas and sets a
> specific print size.
> 
> 
> Website: http://www.piedmont-div.org/test/
> CSS: http://www.piedmont-div.org/test/css/styles.css
> 
> The following print media section is at the bottom
> of
> the styles.css file.
> 
> /*---print---*/
> 
> @media print {
> 
> body { font-size: 10pt; }
>   
> a { color: black; background: none; }
>   
> #section { border: 1px solid red; 
> margin-left: 2em; }
> 
> #content {
>   font-family: arial, helvetica, sans-serif;
>   margin-right: 2em;
>   border: 0;
> }
>   
> #header form, #primaryNav, #secondaryNav, #goToTop,
> #sidebar { display: none; }
>   
> }


__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Interesting rotation caching issue

[Scott Povlot]

Phillip,

Perhaps, you can change your PHP script to set
no-cache HTTP headers using Cache-Control or Pragma
when sending the image.

You can find examples at the following sites:

http://us4.php.net/header
http://www.sitepoint.com/article/php-anthology-2-5-caching

Regards,

Scott Povlot

--- Phillip Smith <[EMAIL PROTECTED]>
wrote:
> C) Knows why the method I've tried is caching on PC
> browsers?
> D) Knows of a fix to solve the caching issue?




Discover Yahoo! 
Find restaurants, movies, travel and more fun for the weekend. Check it out! 
http://discover.yahoo.com/weekend.html 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Print CSS and bad output

[Scott Povlot]

I am having some problems with my print CSS.  I am
hoping that someone on the list will be able to help
me.

I have two different problems.  On Firefox, the header
section prints on a separate page than the content.  I
cannot figure out why.  I have tried changing margins
and padding on multiple sections without success.

On IE, the header and content print on one page.  But
on the home page, the photo captions disappear. 
Again, I am not sure why.

My print CSS removes navigation areas and sets a
specific print size.


Website: http://www.piedmont-div.org/test/
CSS: http://www.piedmont-div.org/test/css/styles.css

The following print media section is at the bottom of
the styles.css file.

/*---print---*/

@media print {

body { font-size: 10pt; }

a { color: black; background: none; }

#section { border: 1px solid red; 
margin-left: 2em; }

#content {
font-family: arial, helvetica, sans-serif;
margin-right: 2em;
border: 0;
}

#header form, #primaryNav, #secondaryNav, #goToTop,
#sidebar { display: none; }

}

Thanks,

Scott



Yahoo! Mail
Stay connected, organized, and protected. Take the tour:
http://tour.mail.yahoo.com/mailtour.html

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Caption Vertical Center on Image

[Scott Povlot]

Thanks, I found that earlier.  However, this problem
is slightly different.  I would like the text on the
right to be centered vertical based on the height of
the image.   So the image will display next to the
middle of the image. 

> > I would like to display an image on the left with
> > caption to the right that is centered vertically
on
> > the picture.

> Today, 2.Mai 2005, 11:10 Ingo Ciao wrote the
> following:
> (About 9 hours before your post)
http://archivist.incutio.com/viewlist/css-discuss/56688





__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Caption Vertical Center on Image

[Scott Povlot]

I am new to this list and CSS. 

I would like to display an image on the left with
caption to the right that is centered vertically on
the picture.

I know that I can do this easily with a table.  For
example:



This is a test caption



I tried this without tables in XHTML and CSS.  The
relative position was the best that I could do to move
the caption.  ;-)



This is a test caption


with the styles :

img.frame {
border: 1px solid #999;
margin: 1em;
padding: 1em;
float: left;
}

.caption {
position: relative;
top: 25px;  
}


Thanks for your assistance.

Scott


__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/