I am doing this site for a friend http://www.kidsmartnyc.com/ and there is an enormous white space in IE8 below the middle image that is not visible in any other browser or any other version of IE. Please help, I have tried everything:)
Change your css, you defined #page1 h1 { height:250px;} .. change this...
I'm seeing a couple of things:
Like Jordy said, you set a height on your #page1 h1 tag. That's usually not necessary. The reason you're not seeing it is because the h1 tag is empty, like this:
<h1></h1>
Below that in the code, you just have a couple of tags that are also creating more space. Take those out and you should be fine.
Related
On our WordPress blog, it seems the style is inherited from the foundation.css file.
In particular, the font-size of headings, that we would like to change.
For instance, on this page, when we inspect element, it seems that the font-size of h2 is defined in foundation.css, on line 2813.
So, we changed the size of h2 in the foundation.css file, on this very particular line, but we still get the same result.
It seems like something it overriding our changes.
What is the right way to change headings font-size?
If you change the size and it doesn't work into your css,
You can Add the !important; parameters at the end of the line. Ex.:
h2 { font-size: 30px !important; }
please, read this if you want to know how to use it. Don't abuse of !important if not necessary!!
Best regards,
Be sure to flush the cache when you refresh the page to see your changes to foundation.css. It's possible that your browser is caching the previous version of foundation.css and your changes are being ignored while it renders (but external users may be seeing them).
Try shift-cmd-R in Chrome, or have the JS console open, and a pulldown menu will appear on the refresh button (in Chrome).
so i managed to get rid off the space on Firefox and other browsers, but on Chrome there is a free space on top, which i can't get rid off.
I have set
body,html {padding:0; margin:0;}
But still it`s there. Can somebody view the page and give some tips how to remove it ?
The website is Here
Try doing
html, body { top: 0;}
as well as the rest of the css, that should work.
According to Chrome's DOM-inspector, you have some text directly after the body tag (see here: http://imgur.com/WFDT64d). If you go to the DOM-inspector, click on the text and hit del to delete it, the space will be gone. You'll probably have to remove some of the white space in your template, as Chrome seems to be a little picky.
Try to change the encoding of your document to UTF8 without BOM, it can help you to solve your problem.
Thats not the css error. Format the code well..
There is the extra "" code after the body opening tag ...
Basically, I want to have an h1 and a p element on the same line, but the alignment is off a lot (meaning the H1 is higher than the P and looks crappy) and I've never had to do anything like this with css before!
I've thrown together a jsfiddle to accompany this, here is the code:
<h1 style="float:left;display:inline;">"Hi!</h1><p style="float:left;display:inline;">I'm James, and I <strong>LOVE</strong> building clean, fast and (most importantly) effective websites. Oh, and I also know a thing or two about computers.</p><h1 style="float:left;display:inline">"</h1>
http://jsfiddle.net/9H8xE/
Thanks!
Some advice before answer:
P tag is meant to create a new paaragraph, so if you do not need that use span tag instead.
Try to avoid inline styles, use CSS selectors.
http://jsfiddle.net/9H8xE/1/
Try this and let me know if it works
HTML:
<h1 >"Hi!</h1><p>I'm James, and I <strong>LOVE</strong> building clean, fast and (most importantly) effective websites. Oh, and I also know a thing or two about computers.</p><h1>"</h1>
CSS:
p
{
display:inline;
}
h1{
display:inline
}
The technical problem with the code in the question is that float: left prevents display: inline from taking effect, setting display to block instead, so remove all the float: left declarations.
A different issue is that you have the closing quotation mark as the content of an h1 element after the p element. This is very illogical. The technical implication is that this character will appear in the font size of h1, causing uneven line spacing unless you set h1 font size to the same as p font size. You need to decide what you want: why would you want to a have a large-size closing quote after normal-size text, and if you do, how should it be rendered?
I'm having trouble with the text underneath the images on the website I'm building:
1) The "Back to home page" changes from the font it's set at (Georgia, 0.9em) to the default in Firefox. It does not do this in Safari (http://ink-12.web5test.terc.edu/img/modelofinteractionfull.cfm).
2) The footer appeared fine before I added images (http://ink-12.web5test.terc.edu/index.cfm). After I added images (inside div class=.submenu), again, the font I set (Georgia, 0.9em) changed to the default in Firefox (http://ink-12.web5test.terc.edu/aboutus/index.cfm).
Another issue that appear after I inserted the images:
1) The footer's vertical bars (|) disappeared between the links, in both Firefox and Safari. You can see that the bars are actually still there when you highlight the text, but for some reason, they do not appear in white anymore so they aren't visible (http://ink-12.web5test.terc.edu/aboutus/index.cfm). But you can see how it's supposed to look on the home page (http://ink-12.web5test.terc.edu/index.cfm).
I wanted to copy my code below, but I'm having trouble understanding how to properly format it on this site, so I'll work on that. In the meantime, any thoughts?? Thanks so much in advance for your help!
For example, regarding question 1, the only CSS rule that sets the font family is
h1,h2,p,p2,li{ /*group codes for many styles*/
font-family:"georgia";
}
It does not affect the link, since it is not inside any of those elements. Similar considerations apply to question 2. And the vertical bars are there, they are just black on black.
Use a markup validator like http://validator.w3.org to find he HTML syntax errors, fix them, and then deal with the CSS syntax errors with http://jigsaw.w3.org/css-validator/ and then analyze the logical problems. Using Firefox with Firebug is a good idea, since then you can click on any element and see which, if any, CSS rules are being applied to it.
I'm not sure if this will help you, but I suggest making sure that "Georgia" is capitalized when you declare it. I might be wrong but suspect that some browsers may not be picking up the name because it doesn't match the font's name perfectly.
Comparing the pipes (the vertical bar characters '|') between your examples shows a small flaw in the CSS. The pipes are not inside of the <a> tags so even if you set all your <a>s to white the pipes will never change. In one example ( http://ink-12.web5test.terc.edu/index.cfm ) the pipes are contained by a <p2> tag, which wasn't a valid HTML tag last I checked but that's besides the point. The <p2> has its color set to white which makes the pipes inside of it white. In the other example ( http://ink-12.web5test.terc.edu/aboutus/index.cfm ) the pipes are contained by a <div> which has its color set to black which makes the pipes black, but the <a>s are set to white. Since your background is also black the pipes disappear.
For the "|" issue add the following
skeleton.css line #161
.footerlinks {
padding-top: 0.5em;
color: #fff;
}
For the link issue it looks to me that the font is becoming bold when you hover. You just need to define your hover state ...
fonts.css line #4
a:hover {
font-weight: normal;
}
Sorry, it was such a simple fix! I"m very new to coding (as I'm sure you could tell by the ridiculous amount of markup I had in my style sheets). I didn't know that links could have all their own font-family, and thought that if you kept it between a heading or paragraph tag, that it would just take that on. But I get it now, thank you!
Where am i doing wrong?
This is the normal print preview:
But I want to see this picture (without dragging margin arrows)
This is the css codes and preview:
Yes. It is possible to alter your margins in a page printout. The rule would look like:
#page {
margin: 0;
}
This will not work in Firefox as of now. If you check their developer reference on the #page CSS support, you can see what browsers do support #page.
The best you can do is set #page margins. Keep in mind, however, that you can and most likely will be overruled if you set margins to 0.
Thanks ! works well on chrome
#page {
margin: 0;
}
I don't think it is actually possible to do this, because you'd be overruling the defaults on the user's computer. As far as I know, a web application doesn't have the access rights to alter something like printer settings without some kind of ActiveX script in IE.
I had a similar problem a while back, and ended up having to generate a PDF on the fly using TCPDF. In the end that worked out better, because you have greater control over the layout.
I'm prevented from upgrading a computer from Windows XP to something more recent, so basically I'm stuck with IE8.
I found that on IE8, page margins will always be a minimum of 6.01mm left and right, and 5mm top and bottom. No matter what I do, even using #top-left right and centre rules inside the #page rule, it will still default to the values above.
It may be easier to create the stylesheet to take into consideration this limitation on the print size.
It may also help to put the IE hack \9 in front of the CSS class property value, duplicating the property may also help in some cases, (but won't affect the margins of the page), such as:
.aDiv {
margin: 10mm;
margin: 15mm\9; //this \9 hack will set that value only on IE8.
}
I know there are other hacks similar to this, such as \0 but I admit don't fully understand them. \9 works for me in IE8 in some situations.