Solved

Margin Issue on Website

Posted on 2014-03-14
17
21 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:kaushalk
Comment Utility
I will try.  I still need to understand how this works.
0
 

Author Comment

by:kaushalk
Comment Utility
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 42

Accepted Solution

by:
Chris Stanyon earned 250 total points
Comment Utility
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
Comment Utility
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 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
Comment Utility
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
Comment Utility
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 42

Expert Comment

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

Assisted Solution

by:kaushalk
kaushalk earned 0 total points
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

762 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

10 Experts available now in Live!

Get 1:1 Help Now