Solved

Margin Issue on Website

Posted on 2014-03-14
17
24 Views
Last Modified: 2016-05-07
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
Comment
Question by:kaushalk
  • 8
  • 4
  • 3
17 Comments
 

Author Comment

by:kaushalk
ID: 39930898
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39931367
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39931380
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
 

Author Comment

by:kaushalk
ID: 39931583
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 250 total points
ID: 39931595
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
 

Author Comment

by:kaushalk
ID: 39931598
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
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 39933906
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:kaushalk
ID: 39938687
I will try.  I still need to understand how this works.
0
 

Author Comment

by:kaushalk
ID: 39938840
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 39939185
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
 

Author Comment

by:kaushalk
ID: 39939679
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
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 39939696
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
 

Author Comment

by:kaushalk
ID: 39939708
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39939726
Excellent -  a great step forward in bringing your site up-to-date :)
0
 

Assisted Solution

by:kaushalk
kaushalk earned 0 total points
ID: 39948184
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now