Re: [css-d] IE 7 Win issue

[HallMarc Sales]

> Is IE 7  for Windows still being paid attention to by developers?
> If so, I have an issue at this link:
www.coffeeonmars.com/testing/index.html
> 
> with widgets being cut off at the top. IE 8 gets it right; 7 shaves off
the top
> portion...
> 
> Looking in Firebug, I don't see any conflicts that would explain this.
> 
[>] 
Bah! Sent that off and realized I meant change just the top-padding not the
bottom. 

__
css-discuss [css-d@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/

Re: [css-d] IE 7 Win issue

[HallMarc Sales]

> Is IE 7  for Windows still being paid attention to by developers?
> If so, I have an issue at this link:
www.coffeeonmars.com/testing/index.html
> 
> with widgets being cut off at the top. IE 8 gets it right; 7 shaves off
the top
> portion...
> 
[>] 
first; you have a couple of typos in the font-family rule for your h4
missing the ':' after 'font-family' and 
you are missing the quotes around Helvetica Neue

Now, what you are seeing is caused by the line-height rule for your h4 which
sets the line-height to 1px. Most browsers are forgiving; IE7 renders it
from the middle of the h4 down. 

Without to much fuss I think you can make most happ y by changing the
line-height from 10% to 100% or just remove this rule altogether. Then
change your top and bottom padding to 10px.

Try that and let me know.

Marc Hall
HallMarc Websites




__
css-discuss [css-d@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/

Re: [css-d] css3 animations - page check please

[HallMarc Sales]

Sorry I have only a second to jump in - 
[>] First do you know about caniuse.com? Great resource for seeing what is
supported and by whom.

Next, Opera doesn't support the animation property yet try something like
-o-transition: background-color .25s ease-out; 
just add :hover to the rule with the animation/transition property to make
sure it activates on hover instead
Not sure about the infinite run yet

__
css-discuss [css-d@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/

Re: [css-d] help?

[HallMarc Sales]

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
> discuss.org] On Behalf Of jon thornton
> Sent: Tuesday, March 06, 2012 3:53 PM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] help?
> 
> Thanks, but on looking at the forum I can't find how or where to submit a
> question, nor repond to existing questions. I'm confued about how this
> works, I've only used the Wordpress Forums.
> 
> I read the rules, many of which I don't understand :
> 
> 
> 
> Do not crosspost between lists.
> 
> Keep your signature file short
> 
> No HTML or RTF (rich text) e-mai
> 
> If your address starts bouncing, you will be removed from the list.
> 
> 
> 
So far so good! Welcome to the list. This is how you post questions to this
and many other lists like it; you send your query to the list. A lot of
lists and I can't remember if this is one of them or not, frown upon
top-posting which means type your response below the previous response. This
is done so it gets parsed correctly to this and other websites. 
When responding to a thread/post it is good practice to snip the content
down to the section you are responding as well.

Marc Hall
HallMarc Websites





__
css-discuss [css-d@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/

Re: [css-d] Custom Theme Problem

[HallMarc Sales]

Try this instead

p.location {
text-align: left;
padding-left: 20px;
margin: 0;
padding: 12px 0 12px 20px;
}

Margins apply to the outside of an element so no background is inherited by
the "space" created while padding is applied inside the element and as such
is within the background area. 

Thank you,
Marc Hall
HallMarc Websites
www.HallMarcWebsites.com
610-446-3346




__
css-discuss [css-d@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/

Re: [css-d] @font-face issue in PC browsers

[HallMarc Sales]

> I'm working on a site using @font-face for font styling, and running into
a
> problem with PC-based browsers (both IE and Firefox). For some reason, its
> choking on the @font-face css, and not only not rendering the fonts, but
also
> killing the rest of the CSS. Anyone run into a similar problem and have
any
> suggestions on what to do? Here's a link to the site:
> 
> http://csbphotos.com/
[>] 
Your font files aren't located in the directory you have declared. Make sure
you uploaded them and then check the path you have declared in the css.

Marc Hall
HallMarc Websites
www.HallMarcWebsites.com
610-446-3346




__
css-discuss [css-d@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/

Re: [css-d] IE Compatibility mode - forced to not appear

[HallMarc Sales]

I forgot to mention this site http://caniuse.com/ 

__
css-discuss [css-d@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/

Re: [css-d] conditional styles don't seem to apply - why?

[HallMarc Sales]

> 
> What am I doing wrong? Is the the expected behavior ?
> 
> 
A link to the page in question might help if you can provide it

__
css-discuss [css-d@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/

Re: [css-d] IE Compatibility mode - forced to not appear

[HallMarc Sales]

> Any known way to force the browser to not use compatibility mode at all ?
> (without going to each bad browser users and yelling at them that, despite
> not being there fault on such a stupid decision, they still shouldn't use
it) ?
> 
Use   and this will
keep the Compatibility button from appearing in the browser address bar.
While true that anyone that knows how can hit F12 and start the Developer
window which allows them to switch document modes; I wouldn't worry.  
[>] 
As far as HTML5 usage; using what is currently available or not is up to
you. Here is what I know, 
HTML5 is still in Draft form and so is HTML Living Standard
HTML5 is expected to reach the Candidate Recommendation stage during 2012. I
had read that this would actually be 2022 and based on noises by Adobe about
parts like  which threaten Flash to some degree and the fact that
this is such a big project, like CSS3, that I expect we will continue to see
parts hit CR/browser support. Now, because it is still in draft it means
that using it on production sites is a gamble. One may find themselves
suddenly needing to go back and rewrite their sites (the amount would depend
on how many sites you have used said draft for) because the spec they used
was completely dropped. FWIW and IMHO if the major browsers are supporting
it and it is widely used then the chances of it being completely dropped are
near 0. 

I too, had decided that I would avoid using HTML5 while in draft until I
realized that in doing so I was leaving myself and my services stuck in the
past. My Golden Rule for anything web related is this: If it isn't supported
by the major browsers then it doesn't exist yet. I use the sites below to
check if something I might want to use is fully supported yet:
[>] 
http://html5readiness.com/ 
http://www.css3.info 



__
css-discuss [css-d@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/

Re: [css-d] iPhone/iPad iPhun

[HallMarc Sales]

> __
> 
> 
> 
> Same here on iPhone 4/iOS5. I have to pinch it down to fit in 
> landscape. Wont fit at all in portrait.
> 
[>]
Aha. I am seeing that this is not the same page as the one I have been
referencing. I do not think the kind folks at Dev7 purposely targeted
anything. I am seeing now that what they have is a happy accident. However,
it caused me to start digging and searching and now I am starting to
understand what makes the ever finicky iOS tick. Somewhat... 

As for the URL http://nivo.dev7studios.com/ This is the page that caught my
attention. I see the demo pages do not behave in the same fashion. If I
posted the wrong URL I apologize profusely for the confusion.


__
css-discuss [css-d@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/

Re: [css-d] iPhone/iPad iPhun

[HallMarc Sales]

> I hope that I am using the wrong url but the gentlepeople that produced this
> page 
> don't have clue on how to hit portable devices...
> 
> The page throws an enormous horizontal scrollbar in iPad portrait mode; and,
> an enormous scrollbar in both portrait /and/ landscape mode in these mobile
> handsets:
> 1/ iPhone
> 2/ Andriod/2.2.2
> 3/ Andriod/2.2.2 running Opera Mobile
> 4/ Andriod/2.2.2 running Opera Mini
> 
> Best,
> ~d
> 
> PS They have failed to account for the page's overall pixel width in
> attempting to hit portable devices...
> 
Um.. What? I'm looking at it on the iPhone 4 and I don't see this enormous 
scroll bar you speak of. Do you see the entire width of the page inside your 
viewport? I'll check on my Android handset when the battery recharges. 

__
css-discuss [css-d@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/

Re: [css-d] iPhone/iPad iPhun

[HallMarc Sales]

OK so in my excitement; don't want to say how long I've been researching
this issue, I see I forgot to include a couple of key points:
1) I am working on a site built with WordPress and various plugins and the
pages were exhibiting the iOS "Bug"
2) I happen to look at the Nivo demos on an iPhone and noticed that their
site is also built on WP and yet the site stays within the viewport
3) After searching and comparing and pulling copious quantities of what used
to be hair on my head out I started posting hoping that a fresh pair or
maybe more seasoned pair of eyes could point out the issue. 
4) It now looks like the iOS bug may just be CSS related
5) The site I am creating a mobile theme for is now working without the bug

The trigger seems to be the css rule display:none; 
Why hasn't exactly come to me yet.

Sorry, for any confusion.


__
css-discuss [css-d@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/

Re: [css-d] FIXED: iPhone/iPad iPhun

[HallMarc Sales]

OK I found what was causing the issue; Nivo Slider CSS, specifically this:
[>] 
.nivo-html-caption {
display:none;
}

I changed it to 
.nivo-html-caption {
visibility: hidden;
}
and the bug goes away for this page. 

Anyone enlighten me as to why this would be?

__
css-discuss [css-d@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/

Re: [css-d] iPhone/iPad iPhun

[HallMarc Sales]

> -Original Message-
> From: Tom Livingston [mailto:tom...@gmail.com]
> Sent: Thursday, January 12, 2012 8:47 AM
> To: HallMarc Sales
> Cc: CSS Discuss
> Subject: Re: [css-d] iPhone/iPad iPhun
> 
> For what it's worth, that page is showing the orientation bug on my
iPhone...
> 
> Sent from iOS 5
[>] 
I apologize. In my attempt to understand this I was changing things on that
page. I put the original back up. Sorry again for the confusion there. 



__
css-discuss [css-d@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/

Re: [css-d] iPhone/iPad iPhun

[HallMarc Sales]

> you set the width of your containers:  header, footer, #main to 960px.
> The default width of the viewport on iOS is (...drumroll...) 980px.
> 
> Your layout fits in that, although it is scaled down in a way.
> >
> 
Yes, I am aware of that. Here is a head scratcher for you, remove the text
from between any  tags or  tags and the page stops fitting in the
viewport. The bug wakes up and all iOS hell breaks loose like always. 
FWIW - I tried setting up a page with width settings and similar content and
it doesn't work. I can get them to fit on initial view as always and when
you start rotating the iPhone the bug also appears as always. I am beginning
to think this page is just a happy accident. 

__
css-discuss [css-d@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/

Re: [css-d] iPhone/iPad iPhun

[HallMarc Sales]

And just so we are clear, there isn't one thing in the code for this page, 
JavaScript or otherwise that I can find that targets the iOS specifically. For 
all appearances it is just put together like you would any other page; 960px 
wide (bit narrow IMO yet necessary for iOS) which leaves the question 

How does this page always fit (unless the user changes the size) within the 
viewport no matter the orientation on the iPhone? 
[>] 
I guess not everyone here is familiar with the iOS bug that has been around for 
years. 


__
css-discuss [css-d@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/

Re: [css-d] iPhone/iPad iPhun

[HallMarc Sales]

Hmmm.. let's try this again. Can anyone tell why this page, 960px wide, will
fit (well almost 100% but considering it's the iOS!!! I'll take it.) in the
viewport no matter which way you rotate your phone or how many times you
rotate it or which orientation your phone was in to begin with. And did I
mention that there isn't any special code, no special meta viewport, no
special JavaScript fix, no specially crafted CSS statements either. 

I have been looking this site over and cannot figure out what in this layout
structure makes iOS so damn happy.

I was hoping someone here could. This is my 3rd try. So far, I have only
received info about fixes. Guys and gals, IT ISN"T BROKEN. So please try to
explain what it is that makes the page work so well on iOS.

This is the page http://www.110rpm.com/bnc.html 

Marc Hall
HallMarc Websites
www.HallMarcWebsites.com
610-446-3346

__
css-discuss [css-d@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/

Re: [css-d] iPhone/iPad iPhun

[HallMarc Sales]

Thank you for the responses. Nothing that readily addresses why this page
works so well. I have yet to determine what it is about it that iPhone loves
so well. None of the solutions provided in the responses have been used in
order to achieve the result; but thanks all the same. 

Maybe I wasn't clear. So let me try again.

This page; http://www.110rpm.com/bnc.html, works beautifully on iOS. You can
rotate your iPhone to your hearts delight and the dreaded iOS bug seems to
be a thing of the past. No special JavaScript solution or meta tag (just
this: ) or special CSS,
nothing that I can see so far tells me why. Making me feel like I did when I
wrote my first web page. It feels like I should be able to grock it from the
code, yet, I'm stumped.

Anybody know what I'm missing?


__
css-discuss [css-d@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/

Re: [css-d] iPhone/iPad iPhun

[HallMarc Sales]

> 
> Oops I guess I should have read your whole message. I think u are looking
for
> the viewport meta. Can't find the code right now, sorry.  :- P
> 
> 
No, actually you had it right the first go. That is the bug in the Apple iOS
that they just seem happy to leave in... I will read more from the link you
sent in the first response. Thank you.

__
css-discuss [css-d@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] iPhone/iPad iPhun

[HallMarc Sales]

Hello all, I am finally creating a theme for a web client for the mobile 
devices and in doing so I noticed that my site is presenting and behaving as 
expected on everything but iPhone4/4s. I will deal with iPad later. Besides the 
Apple Developer docs, where can I find good intel on iOS quirkiness and the 
rules that must be followed for it to play nicely like the rest of the children?
[>] 
What I am looking for is this:
When I rotate the phone after initial load (where it should fit in the 
viewport; landscape or portrait) I want the site to stay inside the width of 
the viewport and not break just because I change the orientation. 

Here is a sample I copied from dev7studios.com
http://www.110rpm.com/bnc.html (must view from iPhone to see the correct page)
As you can see, no matter how many time you swap the orientation it stays 
within its confines. The width is around 960px on this page. I have scoured the 
HTML, JavaScript and the CSS and I do not see anything that is special; nothing 
that looks to see if the visitor is on iOS. Nothing that checks for orientation.

Any help, pointing of the right direction, giggling, etc will be appreciated.

__
css-discuss [css-d@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/

Re: [css-d] Drop Down Menu On Hover Testing Please - IE 7

[HallMarc Sales]

> > In IE7 the dropdown hangs (stays open) if mouse-pointer is moved
> > anyway but straight upwards, and as the image...
> > 
> > ...shows the list-items in the dropdown don't line up properly in IE7.
> 
> > regards
> > Georg
> 
> 
I can't reproduce the drop down stickiness issue; however, add these to your
#main-nav LI UL#sub-nav LI { ... } declaration and you will correct the list
alignment issue:
white-space: nowrap;
clear: left;

__
css-discuss [css-d@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/