I have just got a developer to redesign my website and I have noticed one thing.
In Google Chrome my web page has a nice margin around it, about 2". But on IE the page goes right up to the edge of the page and makes the page look super big.
I want them both to have a margin around the page.
The web page I am talking about is, web design quotes.
Is the code I need to change in the CSS?
Any help is appreciated.
This link will show you how to make 'responsive web designs' so it fits all resolutions.
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
You can try this. it helps you when it does not work in IE
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
in your body you give the margin and in your content you do an margin auto.
as explained here: http://bluerobot.com/web/css/center1.html
Related
I have a dilemma that appreciates and tries any suggestion put forward. I have a localhost running wordpress using the theme The Fox. I have everything running perfectly except for the footer.
I have some pages that the content does not extend a page, while others extend more than a page and the issue I have is that the footer starts exactly where the text ends and I dont want to add white space because of view port dissimilarities. As you can see below, I have a screenshot of a sample page with small content.
I hope you noticed the extra white space after the footer, which is also on the screen taking the footer to the center of the page.
I want the footer to extend to the end of the page no matter the length of the content or the size of the screen.
Inside the CSS, there is a footer section and it is here on Pastebin but I think the most important one is as below;
footer
{
bottom:0px;
right:0;
left:0;
overflow:auto;
padding:0px;
min-height:70px!important;
height:auto;
position: relative;
z-index: 9000;}
In the footer, I am using just a single column and I think this code handles that... also in pastebin.
.footer_1_col .widget_wrap
{
width:100%!important;
float:none!important;
margin-left:auto!important;
margin-right:auto!important;
padding-right:10px!important;
}
And on the footer type, I use type 8, which uses the code;
/**************************************************
Footer Type 8
**************************************************/
.footer_type_8 .widget_wrap {
margin: 10px 0px 0px 0;
}
.footer_type_8 .widget {
margin:0px 0px 0px 0;
}
.footer_type_8 .widget h2 {
font-size:10px;
text-transform:uppercase;
font-weight:900;
letter-spacing:normal;
line-height:14px;
margin-bottom:0px;
padding-left:0px;
position: fixed;
}
.footer_type_8 .widget_line {
display:none;
}
Please what am I doing wrong and where do I need to make changes? If you need to see some other code, please let me know and I will post it on pastebin.
Thanks.
Special thanks to #Firasd for his comments that made this possible.
All I did was to look for the body element using the browser inspector, and then recalculate the size for that element using the already known static height of the header and footer.
This Was Added to the Page's CSS Section
html,body {height:100%;}#fw_c { min-height: calc(100vh - 162px);}
The theme uses Bakerly Visual Composer and I just had to add the above code to the page I want the changes.
Note that if you have a slider, you will need to put that in your calculation too except if your slider is in a row element.
My website is left-aligned in IE 8 and 9 when it should be centered like it is in Chrome and Firefox. I have tried standard solutions like the one below with no luck. There are multiple style sheets on the page -- perhaps there's a conflict? Any help would be appreciated...
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}
Although you define the following CSS in your style.css stylesheet-
#wrapper{
width:960px;
margin:0 auto;
text-align:left;
position:relative;
}
There is no corresponding element with an ID of wrapper on the page, your #header, #nav, anonymous content and #footer divs are all direct children of the document body.
The link as a child of the h1 with ID "logo" almost certainly needs to have a left value (probably of zero) added in addition to the existing "top" value as it is overlapping your phone number.
You also appear to be encoding the conditional comments added as the first child of body in IE8 as -
<!--[if lt IE 8]--> <!--[endif]-->
Is appearing in the page.
Have you tried using either Chrome Developer Tools or Firebug (for Firefox) to inspect your code?
I am using the Facebook like box code in my side bar by pasting the Facebook code into a text widget. My theme is responsive, and I'd like to get the like box to resize correctly. I found this tutorial but he says the way he is doing it, isn't "fully responsive" so I didn't know if there was a better way to do it.
NOTE: this answer is obsolete. See the community wiki answer below for an up-to-date solution.
I found this Gist today and it works perfectly: https://gist.github.com/2571173
(Many thanks to https://gist.github.com/smeranda)
/*
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/
*/
/*
This element holds injected scripts inside iframes that in
some cases may stretch layouts. So, we're just hiding it.
*/
#fb-root {
display: none;
}
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}
Colin's example for me clashed with the like button. So I adapted it to only target the Like Box.
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }
Tested in most modern browsers.
NOTE: Colin's solution didn't work for me. Facebook may have changed their markup. Using * should be more future-proof.
Wrap the Like box with a div:
<div id="likebox-wrapper">
<iframe src="..."></iframe> <!-- likebox code -->
</div>
and add this to your css file:
#likebox-wrapper * {
width: 100% !important;
}
As of August 4 2015, the native facebook like box have a responsive code snippet available at Facebook Developers page.
You can generate your responsive Facebook likebox here
https://developers.facebook.com/docs/plugins/page-plugin
This is the best solution ever rather than hacking CSS.
The answer you're looking for as of June, 2013 can be found here:
https://gist.github.com/dineshcooper/2111366
It's accomplished using jQuery to rewrite the inner HTML of the parent container that holds the facebook widget.
Hope this helps!
None of the css trick worked for me (in my case the fb-like box was pulled right with "float:right"). However, what worked without any additional tricks is an IFRAME version of the button code. I.e.:
<iframe src="//www.facebook.com/plugins/like.php?href=..."
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:71px; height:21px;"
allowTransparency="true">
</iframe>
(Note custom width in style, and no need to include additional javascript.)
I was trying to do this on Drupal 7 with the " fb_likebox" module (https://drupal.org/project/fb_likebox). To get it to be responsive. Turns out I had to write my own Contrib module Variation and stripe out the width setting option. (the default height option didn't matter for me). Once I removed the width, I added the <div id="likebox-wrapper"> in the fb_likebox.tpl.php.
Here's my CSS to style it:
`#likebox-wrapper * {
width: 100% !important;
background: url('../images/block.png') repeat 0 0;
color: #fbfbfb;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
border: 1px solid #DDD;}`
I am using asp:button for my asp.net project.
I wrote one css Class. It perfectly apply Css style and show image in the asp:button.
It is working fine in FF, Safari and IE8.
But the Css Class does not work in IE7, How to solve? and my Code is:
.likeImage {
background-image:url('images/LikeNew.png');
background-repeat:no-repeat;
background-position:top left;
width:65px;
height:24px;
cursor:default;
text-align:left;
padding-left:5px;
margin:0px;
padding:0px;
}
try this :
padding: 0 0 0 5px;
You used (padding-left:5px;) and (padding:0) this is not the right way.
just use
padding:5px;
Then please check.
Add border:0; in your CSS for asp:button.
Internet Explorer calculates padding towards inside of a block, while other browsers calculates padding towards outside of a block.
In IE, Actual Width = CSS width.
Others, Actual Width = CSS width + Left Padding + Right Padding.
The second one is standard CSS approved by W3C.
I'm almost finished a site , but for some reason it's not appearing as wanted in IE. The div "content" (with top border) is showing up twice - once with the content in it, centered, and again below the navigation, but aligned to the left and with no content in it. It is showing up fine in Safari and Firefox.
Here is the CSS code:
#content {
#content {
position:relative;
top: 50px;
width:900px;
height:580px;
border-top-color:#000000;
border-top-style: solid;
border-top-width:1px;
}
And here is a link to the site: http://www.thomas-collection.eu/home.html
Thank you!
Validating your HTML will fix the problem (you have an open DIV among other things.)
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.thomas-collection.eu%2Fhome.html