• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 37
  • Last Modified:

Margin Issue on Website

Hi,

I am just dabbing into and created a site.  I tested the site and it looks good on desktop and laptops.  But when I view the same home page on my iPad, I see 2px or 3px margins on top, left and bottom.  Don't see any on right.  I prefer not to see any margins on any side whatsoever.  Don't know where else to look to resolve this issue.

I am attaching my css file if that will help.  website is www.petsportfolio.com

Thanks
style.css
0
kaushalk
Asked:
kaushalk
  • 8
  • 4
  • 3
7 Solutions
 
kaushalkAuthor Commented:
oh.  besides margin issue, I also have issue where the whole page shifts few pixels either directions if I navigate from one button to another
0
 
GaryCommented:
The jumping (left to right) is because those pages don't have a scrollbar
You can fix that by forcing the scrollbars, even on pages that don't need it, by adding this to your css

html {
    overflow:scroll;
    overflow-x:hidden;
    overflow-y: scroll;
}
0
 
GaryCommented:
As you are just starting out you are breaking the #1 cardinal rule
Do not use tables for design, they are for tabular data not for designing a website.
If you want a good framework that is responsive on smaller devices then have a look at Bootstrap
It may take a little while to get your head around it but will save you time in the long run.

As for the 2px margin you are seeing, I don't have an iPad to test and nothing is showing in an emulator.
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
kaushalkAuthor Commented:
Excellent.  Jumping issue has been resolved with the css info you provided.  I had also added the following lines to my wrapper div to the margins I was noticing on 3 sides.

margin-top:  -8px
margin-bottom; -8px

This fixed the issue of small margins appearing.  But when I go to add the line

margin-left:  -8px

to remove that extra margin on the left, my whole page flushes and shifts to the left instead of still being in center.  At present, my page is in middle.

So I have partially fixed the issues of margin but still need to work on the left (~2px) margin.

As far as table goes in website, I intended to clean that up.  Thanks for the bootstrap info.
0
 
GaryCommented:
Just set the margin on your wrapper to this

margin: 0 auto;

It could be the negative margins screwing it up on the ipad.
0
 
kaushalkAuthor Commented:
I already have

margin:  0 auto;

in addition to negative margins.  In fact with negative margins, it has fixed the top and bottom extra px spacing on my ipad viewing.  Now I am only left with fixing the extra left margin
0
 
Chris StanyonCommented:
Negative margins are pretty much always a sign of a hack to fix something else. You really shouldn't use them unless you absolutely know what you're doing.

As a suggestion, when you start out with a new web design, ALWAYS start with some sort of CSS reset or normalizer. Not all browsers render elements the same - they each have their own defaults, particularly for things like margins. A normalizer will flatten out these browser differences and allow your site to behave more consistently across all browsers.

Take a look at normalizer.css  (http://necolas.github.io/normalize.css/) - just download it and include it in your site like a normal stylesheet BEFORE your own styles.
0
 
kaushalkAuthor Commented:
I will try.  I still need to understand how this works.
0
 
kaushalkAuthor Commented:
The normalize.css is more work and cumbersome than making it easy.  It practically dumps everything and all variable and expects a developer to go back clean up what's not needed based on their requirement and html coding.

I tried few codes from normalize.css and it still does not fix my issue.  So dumping normalize.css is not a proper solution.  I see that as a cumbersome fix for all unknown problems and variables.
0
 
Chris StanyonCommented:
If you want consistency across browsers then you'll need to find a way to flatten the various defaults. Pretty much every framework and every designer will do this as a matter of course, using some form of normaliser or CSS reset.

It's not that it's more cumbersome than making it easy - it's just that it's usually done right at the start of the design process. You flatten the CSS, and then you build on that.

If your site is thrown out of whack by adding normalize.css then it tells me that you're relying heavily on browser defaults, so you won't achieve consistency, and will probably have to keep hunting and tweaking your CSS every time you spot a difference in layout.

Trust me - this will get tiresome after a while and you'll start to wish you'd normalised you styling.

If you don't want to use a normaliser then just be happy that your site will look different across a range of devices...
0
 
kaushalkAuthor Commented:
OK.  I will try it again but that only means I will have to leave this posts open until I find myself fixing my issues using normalize.css as there are overwhelming information on normalize.css.

Currently my solution is not resolved, hence I hope everyone has patience while I read up and apply normalize.css again to assure it does what it promises to resolve my concern.

Thanks
0
 
Chris StanyonCommented:
OK. Just make sure you include the normalize.css BEFORE any other CSS, and then use your own stylesheet to set your own styles.

You may also have bigger layout issues because you're using tables for the design. Things were done this way 10 years ago, but not any more.
0
 
kaushalkAuthor Commented:
Lol. The site and HTML has been modified since this post to the point that there are no tables defined anymore.  I am not using tables.

But I will work with normalize to see if it resolves most of my concerns.

Thanks
0
 
Chris StanyonCommented:
Excellent -  a great step forward in bringing your site up-to-date :)
0
 
kaushalkAuthor Commented:
I did try normalize.css, especially to resolve the extra margin issue that I have been having.  Working with normalize.css and trying different options from that css just could not fix my issue.  I also searched on YouTube for normalizing and resolving margins issue but no luck.

I did stumble through one link in YouTube that did resolve my margin issue on all browsers (I tested them) and on mobile devices (iPhone and iPad).  I added the following in my CSS to fix that issue...

body {
   margin: 0px;
   padding: 0px;
}

This small entry in my CSS resolved my 2px margin issue I have been dealing with from start.

Believe me, this does not stop me from yet working with normalize.css for other concerns as I move along on my development because it does point out some useful information for cross browser compatibility.

Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 8
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now