On the main page of my blog: http://www.laboiteaprog.com, there is a problem like you can see with the archive menu at the right.
I checked the html web page and there are this code
<style type="text/css">
p, li {
white-space: pre-wrap;
}
</style>
a couple of times.
It seems the problem happens only on the home page.
Like we can see on this one and other pages, the problem is not happening.
http://www.laboiteaprog.com/2011/08/language-implementation-patterns.html
when i click on the template and modify html code, i don't see
white-space: pre-wrap;
so i don't know how to remove it.
If you absolutely can't find that bit in your templates, you could, as a temporary solution, override it, in your css:
body p,
body li {
white-space: normal;
}
Related
My intro photo slightly covers the breadcrumbs panel on IE and Chrome, see here https://www.hawaiidiscount.com/luaus.htm
It looks fine on Safari and Firefox.
I have been reading on the Internet about css specific code for IE and tried different methods to fix that, but it doesn't work. What am I doing wrong? Thanks!
<!--[if IE]>
<style>
.breadcrumbs {
margin-top: -22px;
}
</style>
<![endif]-->
<style>
.ie .breadcrumbs {
margin-top: -22px;
}
</style>
<style>
#breadcrumbs {
margin-top: -22px;
}
</style>
It's possible that the different heights are due to the different font rendering engines on the different browsers, as this element is being positioned by <br /> elements.
You're able to use conditional statements, such as
<!--[if IE]>
.element{
margin-top: 10px;
}
<![endif]-->
.. to add code that only IE6 - 9 will render, however this will not work in IE10 and above.
You could also browser sniff, but this is really not a good solution as it's better to have one codebase that works across browsers. You also won't be able to anticipate all browsers that your users will use.
The website you've shared is also using quite a few negative margins and absolute positions, which can also cause inconsistent layout issues.
My suggestion would be to remove all <br /> elements, remove as many of the negative margins and absolute positions as possible and lay the page out using a simpler system. For instance, you've split out the background of the breadcrumbs from the text of the breadcrumbs - these should really be together so that you can easily style them together.
Hope that helps
I'm having issues getting my CEWP to apply any of the code inside of it.
There are no errors, no problems whatsoever, it just doesn't do anything.
I've tried putting the code directly inside of the CEWP or linking to the file.
The link to the file works perfectly too.
Here are all combinations of code I have tried to add to the CEWP; perhaps someone can spot the mistake:
With the webpart id from webpage:
<script>
<style>
#WebPartTitleWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
</script>
With the webpart id from SPD:
<script>
<style>
#g_daea6bc5_92ba_4702_9956_55d5077c4440 .ms-viewheadertr
{display: none;}
</style>
</script>
I have also tried with and without the script tag, messing with the spacing, messing with lines, messing with indents and nothing changes whatsoever.
I just want to remove the header from WebPartTitleWPQ9.
The style works just fine on the custom listview page when I add it directly to the page source, but the style doesn't remain when I add the list to other pages. I need the style to apply wherever the list is being used.
You have the a style tag inside the script tag.
Try this:
<style type="text/css">
#WebPartTitleWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
or this:
<style type="text/css">
#g_daea6bc5_92ba_4702_9956_55d5077c4440 .ms-viewheadertr
{display: none;}
</style>
The name of the webpart needs to have "title" / "caption" omitted. The real name of the webpart is WebPartWPQ9 and not WebPartTitleWPQ9.
Changing the css to:
<style type="text/css">
#WebPartWPQ9 .ms-viewheadertr
{
display: none;
}
</style>
fixed it.
I'm trying to remove the 8px margin from the body tag.
I've tried (not all at once)
* { padding:0; margin:0; }
and
html, body { padding:0; margin:0 !important; }
and
body { margin:-8px; }
and even
<body style="margin:0">
The last one works, but only if I add the style attrib using Firebug; if it's in the original HTML, it gets ignored.
I'm at my wit's end.
Edit: facepalm I figured it out; I'd changed it to a cfm so I could easily call browser-specific styles. Thank you all for your help.
Include a reset stylesheet instead, this way you will reset all of the default values equally in all browsers.
http://meyerweb.com/eric/tools/css/reset/
All you need is:
body { margin: 0; padding: 0; }
The padding is not needed for Firefox, but for Opera, which uses padding instead of margin for the default.
Demo: http://jsfiddle.net/k3j8Y/
body{ margin: 0;}
works ok for me :P
Include your stylesheet correctly
As your style is not appearing in FireBug's CSS rule stack, your CSS is probably not linked correctly. Ensure the stylesheet is in your head tag like so:
<head>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
Say I have the following code
<style type="text/css" media="all">
span, ul, ul li {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
list-style: none;
}
</style>
<span>i would want</span>
<ul>
<li>this</li>
<li>on</li>
<li>one line.</li>
</ul>
I want this to display inline in IE8. Everywhere I have read everything says this should work, IE8 supports inline-block. However after a morning of trying I cant get the above to line up. I know I could float it, but with the other elements on my page (not shown here) I would need to use a 'clearfix' which is more mark up. I only need to target IE8 and would love to know why inline block doesn't work for me when apparently its supported. The above code does what I want when viewed in Google Chrome.
I'm guessing you haven't declared a doctype. Try placing this on the first line, before the html tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The code you pasted works in IE8 with that doctype.
Not all IE8 versions seem to work equally. I found that the given code, even with a DOCTYPE, does not work in IE 8.0.6001.18702, which is an early version.
However, the workaround for lower IE versions did its job on that particular IE 8 as well:
<!--[if lt IE 8]>
<style type="text/css">
li { display: inline; }
</style>
<![endif]-->
You can set margin-right:1px
worked for me pretty well.
In my experience it is always a better idea to use the universal way (IE6+) of declaring an inline block. Even if you are targeting newer browsers every time I've tried to say that it's only supported by newer browsers some client still messes with their document type, and then the sales say, it needs to be fixed, because clients can still see it and does not get it, that it's down to their IE settings and not our fault. More over when you are using inline-blocks for structural stuff, it keeps the site from completely disintegrating if the user is viewing the site on an older IE for what ever reason.
display: inline-block;
*zoom: 1;
*display: inline;
IE8 will treat it as a block level element unless you use float.
.divInlineBlock
{
display: inline-block;
float: left;
}
Note that IE8 will act like IE7 if you are viewing an intranet site, which can happen as you develop! See this StackOverflow question:
IE8 Rendering as IE7 By Default?
For IE8 - you can add a specific declaration:
display: inline-table;
which works great.
I have created a couple of ASP.Net (aspx) pages which are supposed to run with existing ASP pages in a website.
Both ASP and ASP.Net pages use the same css file. In both the pages, there are headings which are styled using tag from css file.
The problem is that headings in .asp and .aspx pages are rendering in different size in Internet Explorer. It works fine in FF and Chrome.
Please suggest some workaround for this, as I have to make my .aspx pages similar in look and feel to the existing .asp pages.
Thanks in advance!
Updated:
I can paste a part of css file here, since it is a large file:
TH, FONT, TD, P, B, I, STRONG, U, EM, BLOCKQUOTE, LI, OL, CAPTION, DL, DT, DD,select,pre {font-size:11px;font-family:Arial, Helvetica, sans-serif;}
body{
font-family: Arial, Helvetica, sans-serif;
color: #000000;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
h2{
font: bold 150% Arial, Helvetica, sans-serif;
color: #000000;
margin: 0px;
padding: 0px;
}
The aspx page (heading part) looks like this:
<table style="left: 35px; position: static; top: 231px">
<tr>
<td style="height: 85px; width: 2087px;">
<h2><asp:Localize id="lblHeading" runat="server" Text="Welcome to XYZ" meta:resourcekey="lblHeading"></asp:Localize>
</h2>
</td>
</tr></table>
ASP page has a simple tag:
<h2>Welcome to XYZ</h2>
Updated:
The weirdest thing happened. I tried stripping down the css file and started adding each style one by one, and refreshing the page to check which styles are getting applied to the heading. I noticed that if I remove the first line of css (keeping all the other styles intact):
<STYLE type="text/css">
then the headings look same in both asp and aspx pages. As soon as I add the above line in css file, the heading in aspx page becomes bigger.
Any comments as to why this is happening?
Make sure you are using the proper and the same Doctype at the top of the ASP and ASPX pages. You can also use the developer tools in FF and in IE to make sure that the same styles are applied to headings on ASP and ASPX pages in both browsers. What version of IE are you using?
You might be interested in section about w3schools recommendation for font-size
The suggested way, as I understand is to declare in body:
body{
font-size: 100%; // which default is 16px
}
and everywhere else use em (instead of % or px), as explained in the link.
So in your header you should not have 150%, but instead DesiredSizeInPx divded by 16, for example if you want to have 24px you write 24/16em, which is 1.5em
The problem could be that two different styles are being applied.
The ASP page is getting the straight h2 style
h2{
font: bold 150% Arial, Helvetica, sans-serif; etc.
Whereas the ASPX might be getting another style
id="lblHeading"
Check to see if #lblHeading is giving a different size.