I am working on my first website, and one of my concerns at the moment is my navigation bar. It should display across from my name in the middle, however, it displays lower than my name every time I check the Macs at school. Someone said it could be the padding in my navigation causing the error? I've tried a few different things but I'm still having this problem.
I'm at a lost as to what the problem could be! I'd like to understand more how the website could work correctly on the pc's I've checked but not Macs. I'm slowly but surely learning all this, so any help is appreciated.
My site is
www.nmariephoto.com
In addition to declaring a left margin on the UL with #dd, you should zero out the other margins. The browser adds a "before" and "after" margin of 1em which is causing your problem.
So on line 134 of PortfolioStyles.css, change
margin-left: 12%;
to
margin: 0 0 0 12%;
i suggest you to use of reset.css to avoid such issues it will reset all your style of every element, if you don't know then pls google it you will get lots of site from where you can find it. thanks
Related
I've read through every SO question and article I can find on the topic and have tried every suggestion, but nothing has made any difference. I just need to print webpages like this one on mlb.com without cutting things in half at the page breaks. It might seem trivial but it's for someone who has been wrongfully imprisoned and can't do anything but sit and read for the next few years (and is a huge baseball fan), so any help would really be appreciated and make a difference.
I've tried many variations of the following, which I inserted at the bottom of the webpage's body (I also tried the bottom of its head) using Chrome's (and Firefox's) developer tools:
<style type="text/css">
#media print {
.view-header, .action, .pitches-exist {
break-inside: avoid !important;
break-before: auto !important;
overflow: visible !important;
float: none !important;
display: block !important;
position: static !important;
}
}
</style>
But when I tell the browser to save/print a PDF, things are still cut off at the bottom of every page like this:
Is there any good solution to this or will I need to try to find some hack that involves changing the absolute positions or margins of elements? Of course, that wouldn't be ideal, especially since I'm not a web developer. Thanks in advance for any help you can give.
Notes:
Please don't share any ideas that you haven't tested yourself and found to work on this particular webpage.
I'd prefer a solution that works in Chrome but would gladly settle for one that works in another browser.
indeed you add a bigger paper size in System printer setting
I'm building a Wordpress website by customizing and editing an existing theme called 'onetone'. It's an one-pager theme. The problem I'm having is that neither the homepage (the one-pager landing page) nor the individual posts/pages will extend to full height.
Under the footer, there's a thin black line 23 pixels in height, that extends 100% of the width.
Here's the quirky thing: while I'm logged into the site as an admin, the line disappears. When I'm visiting as an unlogged, regular user the line is there. All major browsers (FF, Opera, IE, Chrome). Also, on my sister's computer with FF installed the line didn't show even when unlogged.
I've searched StackOverflow, and the usual answer to have <body> and <html> set to height:100%; (including min-height:100%;) isn't working. I've also added height/min-height to containers and wrappers to test the setting. (Not all, though, only the ones I thought were relevant to the issue I was trying to solve) I've also tried the margin: 0; & padding: 0;, but NOTHING works.
I suspected it's the footer's fault, but using the inspect element function in my browser (and some further tests) I found the footer has nothing to do with it.
In the original, untouched theme, the line doesn't appear. So it must be some of my edits causing it, though even by comparing the original and my edited CSS file line by line, I couldn't find something that should've caused this error. And the CSS is the only thing I've edited.
I'm not a coding expert, and I've about exhausted my wits and available knowledge trying to figure this out. Does anyone have any idea what may be causing this glitch?
This is my site. The glitch is best seen on posts / pages. If any specific code samples are needed, just say and I'll post them.
Your code has this weird image just before the <body> tag ends, after all javascript calls:
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=651&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2F&rand=0.7281985701993108" id="wpstats">
Remove it and you're golden
There's a background color on body. Getting rid of that fixes the "border".
body.custom-background {
background-color: #000000;
}
Also there's a smiley on the bottom
It looks like this
<img src="http://pixel.wp.com/g.gif?v=ext&j=1%3A3.4.1&blog=50532064&post=444&tz=1&host=firstinkstudios.com&ref=http%3A%2F%2Ffirstinkstudios.com%2Fblog%2F&rand=0.1907386933453381" id="wpstats" scale="0">
So I just moved from the design phase to the developing stage and after splitting up my static code to codeigniter views on a client server I got this weird css but on 1 tiny part of the website.
I have these links part of the "Official NGK Canada Part Finder" section and my text is breaking from the same line on my new server.
Instead of showing code extracts here is the link to both sites:
http://gfortin.com/css_practice/page.html (works fine)
http://www.sparkplugdepot.com/dev/index.php/home (unaligned)
Everything works perfectly from what I can tell so far, can anyone help me find this bug?
Also I did clear the cache to make sure it wasn't the old code still showing up.
Because you are floating elements within your .link-wrap, you must clear those to make them look the way you want.
.link-wrap {
height: 40px;
margin: 2px 50px;
position: relative;
clear: both;
}
As to why, I'm not sure. However, I'm curious as you may have noted, your navigation is 4px taller on one. If you look at the computed styles, one is 55px, the other is 51px. What os's are on these servers?
I have this JSFiddle
http://jsfiddle.net/ThYBS/
and when I run it on the JSFiddle site everything is displaying fine, but when I display it on my local machine there is a random indentation before the left word.
The word part where it should be where I can't find any issues is with the
#menu ul {}
but I can't seem to find anything.
I have no idea why, can you guys check on your side too? and let me know if you know a reason?
Thanks!
Regards
Matthew
I ran into this problem as well - the default browser behavior seems to be to indent items within a <menu> tag. Removing the padding with {padding: 0px;} or using a CSS reset/CSS normalize should do it.
Adjusting the UL's Padding to 0 helped.
Lately, I've been running into more and more poorly designed websites that do things like this Hudson Website The page is some 1600 pixels wide on my 90 degree rotated monitor, it means you have to scroll left<->right a LOT. Having firebug installed, I figured I'd just go fix it on the fly for reading, but that is proving harder than imagined.
I can't seem to locate what is causing it to be so wide. There is a <table width='100%'>, but that should be 100% of the container, and I can't find a container that says "BE UNREASONABLY WIDE". So, I'm asking what tricks you use in firebug to figure out what is causing an element to have the size it has, specifically the width.
Edit:
Well, I'm still picking at it, and it turns out that
.wiki-content p {
margin: 10px 0;
padding: 0;
width: 850px; // I had to add this to make it readable, width was NOT defined
}
will make it readable, so something about the <p> tag is causing it, but I don't see anything in the css that should make it this wide. What am I missing?
The page is wide because of the <pre> elements.
At least on Firefox, you can fix it by adding the CSS rule:
pre {white-space:normal;}
You could run the page through a validator as a first step. E.g. http://validator.w3.org/
As an aside, I ran the master CSS of the linked site through the Flumpcakes optimizer, and got this result:
Before 64064
After 53832
Saving 10232
Percentage: 16%