SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    IE7 adds margins and dimensions all over the place -- help please..

    http://mayacove.com/dev/modal/modal_test.html

    why does the scrollbar appear only in IE7? there's no content beneath the three cols (with green borders..) so why am I getting a scrollbar here in IE7?

    (I need overflow:auto; for all containers here b/c where I work it has to work also at zoom levels of 200% (text only, not imgs -- don't ask....;-)
    so in order for content not to bleed outside the div at 200%-zoom I have to use overflow:auto all over the place.. scrollbars at 200% zoom are fine, but not at 100%, and at 100% scrollbar is only appearing on IE7.. )

    so it seems IE7 is somehow adding to the height of some elements... or what is it doing please..
    (I have no top or bottom padding anywhere...)

    thank you..

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hello .

    I'm viewing the page in IE7 via IETester. I'm not seeing any scrollbars. Perhaps in the mean time you can fix up the http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fmayacove.com%2Fdev%2Fmodal%2Fmodal_test.html&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en]few validation errors you have[/url].
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is worth looking at CSS resets. http://stackoverflow.com/questions/1...best-css-reset

    Every browser will apply some spacing to certain elements by default, a CSS reset normalises this and helps cross browser compatibility.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I'm not seeing and scrollbars in IE7 either. Do you have a screenshot?

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I would blame it on faulty sitebuilding techniques... specifically attempting to use fixed height elements to build your background -- which is automatically rubbish when it comes to making dynamic content. You're trying to build with floats what should be done with wrapping and padding -- you're trying to use fixed heights when fixed widths one atop the other would be better suited to the job -- you're trying to use sibling elements when wrapping with padding would avoid most if not all your headaches.

    ... and of course fixing the width isn't all that great an idea either -- the combination of fixed height with fixed width with images sliced in that manner add up to what I've come to call "But I can do it in photoshop" nonsense.

    The approach I'd use for that is my own "eight corners under one roof" or a similar take on said method. Since you don't use transparencies that could be done much simpler.

    Let's see... first let's drag it kicking and screaming out of 1998 and into a modern code spec... lose the outdated methodologies like clearing div....

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	MODALS - TEST
    </title>
    
    </head><body>
    
    <div id="modal">
    	<a href="#" class="close">close</a>
    	<div class="borderTop"><div></div></div>
    	<div class="borderFirstSide"><div class="borderSecondSide">
    	
    		<h2>HERE GOES MODAL TITLE</h2>
    		<p class="standout">
    			Nam sagittis scelerisque odio quis aliquam. Vivamus libero neque, dapibus non venenatis sit amet, suscipit id nisi. Duis egestas tempus erat eu fermentum.
    		</p>
    		
    		<div class="subSection">
    			<h3>OPTION ONE</h3>
    			<p>
    				Donec euismod facilisis purus cursus scelerisque. Mauris in congue ante. Morbi varius, urna at tincidunt suscipit, mauris nisi egestas ipsum, faucibus congue tortor elit sed justo. Sed vulputate urna in diam fermentum eleifend. In hac habitasse platea dictumst. Maecenas nulla enim, scelerisque ut vehicula in, tempus a orci. In nec lorem vitae dui viverra lacinia at vel nisl. Donec at odio enim, sit amet luctus nulla. Vivamus non scelerisque metus. Nunc nisi quam, facilisis feugiat hendrerit nec, ultrices vitae augue. Nam neque lorem, fringilla id sagittis nec, varius id elit.
    			</p>
    		<!-- .subSection --></div>
    		
    		<div class="subSection">
    			<h3>OPTION TWO</h3>
    			<p>
    				Donec euismod facilisis purus cursus scelerisque. Mauris in congue ante. Morbi varius, urna at tincidunt suscipit, mauris nisi egestas ipsum, faucibus congue tortor elit sed justo. Sed vulputate urna in diam fermentum eleifend. In hac habitasse platea dictumst. Maecenas nulla enim, scelerisque ut vehicula in, tempus a orci. In nec lorem vitae dui viverra lacinia at vel nisl. Donec at odio enim, sit amet luctus nulla. Vivamus non scelerisque metus. Nunc nisi quam, facilisis feugiat hendrerit nec, ultrices vitae augue. Nam neque lorem, fringilla id sagittis nec, varius id elit. 
    			</p>
    		<!-- .subSection --></div>
    		
    		<div class="subSection lastSubSection">
    			<h3>OPTION THREE</h3>
    			<p>
    				Donec euismod facilisis purus cursus scelerisque. Mauris in congue ante. Morbi varius, urna at tincidunt suscipit, mauris nisi egestas ipsum, faucibus congue tortor elit sed justo. Sed vulputate urna in diam fermentum eleifend. In hac habitasse platea dictumst. Maecenas nulla enim, scelerisque ut vehicula in, tempus a orci. In nec lorem vitae dui viverra lacinia at vel nisl. Donec at odio enim, sit amet luctus nulla. Vivamus non scelerisque metus. Nunc nisi quam, facilisis feugiat hendrerit nec, ultrices vitae augue. Nam neque lorem, fringilla id sagittis nec, varius id elit.
    			</p>
    		<!-- .subSection --></div>
    		
    	<!-- .borderSecondSide, .borderFirstSide --></div></div>
    	<div class="borderBottom"><div></div></div>
    <!-- #modal --></div>
    
    </body></html>
    I'm assuming the red and green lines in your existing version are outlines to show the layout.

    Gimme a few minutes to stuff my face, then I'll belt out the CSS I'd be using with that, as well as a new image.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Here's what I came up with:

    http://www.cutcodedown.com/for_other.../template.html

    Not a 1:1 recreation, but shows how I'd go about that type of border using images. NOT that I use images for that anymore as that's CSS 3's job... and if the user's browser doesn't support CSS3, oh well, maybe they can pull their head out of the `90's backside before this decade is out.

    let's face it:

    -moz-box-shadow:0 0 24px 6px #CCC;
    -webkit-box-shadow:0 0 24px 6px #CCC;
    box-shadow:0 0 24px 6px #CCC;

    Beats the ever living tar out of this -- even if people stuck in the last decade don't get the fancy shadow. (OH WELL!)

    Your images also had 'non-deployable' flaws in them -- the gradient stretching past the corners for example while cute, isn't really practical to implement... and always remember, fixed height sections with content paragraphs in it? BAD idea all around.

    I also swung the axe at the alpha transparency .png, since they too are usually a really bad idea in web design.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Just to further illustrate the point, I made a CSS3 version...

    http://www.cutcodedown.com/for_other...late_css3.html

    Legacy browser users (IE8/lower) don't get the shadow -- OH WELL. I'd go with that and forget about making it perfect for people stuck in the last decade... give them a page that WORKS, who cares about the pretty extras. Good way to wean off those who have a choice, without completely alienating those who are stuck there due to work, or finances, or what have you.

    Can't bend over backwards for people who refuse to update when the alternatives are free...

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Good work Jason and interesting comparison between the CSS3 and standard versions. I find it hard to bring myself to round corners with images or add shadows these days when border-radius and box shadow do it so easily.

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Good work Jason
    Thanks...

    Quote Originally Posted by Paul O'B View Post
    I find it hard to bring myself to round corners with images or add shadows these days when border-radius and box shadow do it so easily.
    More so if you're not a photoshop genius or find the image results made by the paint programs not as good looking as what CSS3 makes. No more artifacts from image compression, no more restricting yourself to a narrow palette to keep the file sizes even further under control, no more messing with broken/bloated alpha transparent .png files...

    ... and if you really want images, border-image kicks the ever living tar out of anything you could do in CSS 2.1

  10. #10
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally, I don't believe in using images when simple CSS3 can do the trick, not only is it a time issue but also the additional requests, page loadtime etc etc. Not having rounded corners may not look great but the site will still function. I generally explain this to my clients and offer them additional browser support for ascetics (I always ensure the site is presentable in the standard range of browsers by default) at an additional hourly cost.

  11. #11
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you..

    the content is not dynamic, it's hard-coded (it's plain HTML)
    I had no choice but to use height.. you know how some people love those vertical gradients.. (also had to use fixed heights b/c of the sides, with the drop-shadows.. ( instead of the top-middle-bottom system (much better of course), I had to do left-middle-right.. b/c of the vertical gradient...)
    I know some coding methods are not always best practice, but sometimes designs force you to do weird things.. I struggle constantly here with this, am always telling them not to design with vertical gradients...
    (right now am doing a page w/tons of tooltips, also with vertical gradients, and EACH tooltip is a diff height AND width.. it's just crazy...)

    but I find in general that IE7 is constantly adding margins and widths to elements (and yes to respond to another poster, I do use resets, I use Eric Meyer's reset.. I guess I didn't use it in my dummy example, but the problem was the same... )

    there is one specific bug I know of, in which IE7 sometimes adds left-margin to a floated element if it's the first one in the container (oh brother..) I add display:inline.. but I find in a lot of other instances this doesn't work...

    (another margin bug I found: even in FF: sometimes browsers add top & btm margins (WHY ON EARTH do they do that? even FF....) you have to add overflow:auto to CONTAINING element..

    but with IE7 this happens so often it's crazy... I fixed for my issue I orig. posted here.. but next time I come across this prob I will post again... I really want to get to the bottom of this..

    as regards padding: I avoid padding as much as I can.... where I work we have to test everything at 200% zoom (zoom only text, not images..(sigh...) & top and bottom padding mess everything up when u zoom up.. so prefer inner elements with margins instead of using padding...

    and thank you for what you posted, it works very well, even when I zoom up.. (however, I don't see vertical gradient background....;-)

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by maya90 View Post
    and thank you for what you posted, it works very well, even when I zoom up.. (however, I don't see vertical gradient background....;-)
    There wasn't one on your original... either that or I didn't see it in the browsers I'm using here.

    -- edit -- my bad, it's so subtle I couldn't even see it until I zoomed in 400% and went at it with a color extractor... at which point I'd not bother. You've got less than 5% difference top to bottom, so that's invisible to >90% of the population... and if you REALLY need it, align it bottom or top so that it can still expand to fit the content.

    Since you're using placeholder content instead of real content, meaning no practical prediction of content size -- and you don't want this falling apart a year down the road should *SHOCK* whoever the site is for decide they want fresh new content.

  13. #13
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    There wasn't one on your original... either that or I didn't see it in the browsers I'm using here.

    -- edit -- my bad, it's so subtle I couldn't even see it until I zoomed in 400% and went at it with a color extractor... at which point I'd not bother. You've got less than 5% difference top to bottom, so that's invisible to >90% of the population...
    indeed indeed.... but guess what? I can't go to the PM for this client and tell them we shouldn't do the gradient bg b/c 99% of people won't see it because it's more complicated from an interface-coding perspective... what the client wants the client gets (with rare exceptions when they really ask for weird stuff..)

    WHY IS THIS EDITING WINDOW SO SMALL?? VERY VERY WIDE BUT NOT TALL ENOUGH, TOO MUCH SCROLLING NECESSARY (AND A VERY SHORT SCROLLBAR.. another example of bad usability?? ;~)


    Quote Originally Posted by deathshadow60 View Post
    and if you REALLY need it, align it bottom or top so that it can still expand to fit the content.
    it is bottom-aligned, but remember, if you do something like that w/o setting height for element, the "height" will be whatever content there is, bg-image won't be visible all the way down.. not sure if you know what problem I'm referring to (common prob with div-heights that, alas, does not exist with table/td elements...;-) at any rate, I had to set a fixed height here because the element containing that bg image (.modal_medium_main), has to be the exact same height as surrounding left & right elements, so the drop shadows at the top and bottom in this bg image (http://mayacove.com/dev/modal/images...ium_middle.png) matches the drop shadows at top & btm of left & right elements.. (it's because of this vertical gradient I had to do the layout for the modal left/middle/right instead of top/middle/btm (a much better choice for many reasons, among others when there is dynamic content, and even if it's not dynamic, just as you mentioned, but just gets changed later.. that's an excellent point.. thank you very much.. and thank you very much for your help...

    Quote Originally Posted by deathshadow60 View Post
    Since you're using placeholder content instead of real content, meaning no practical prediction of content size -- and you don't want this falling apart a year down the road should *SHOCK* whoever the site is for decide they want fresh new content.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •