Okay guys, I have two CSS problems in different browsers:
1) Both in IE and in Firefox, the 20px of padding (top) looks different. In IE and Firefox fullscreen_block appears closer to the bottom than in Safari and Chrome.
.fullscreen_block {
padding: 20px 0 0 20px;
text-align: center;
}
2) Only in IE, margin-right of right-sidebar-block appears a lot closer to the left side of the page than intended.
.right-sidebar-block {
width: 120px;
float: right;
margin-top: 19px;
margin-right: 270px;
margin-bottom: 40px;
}
Does anybody have an idea how to fix this?
Thanks!!!
EDIT: This is the html for .right.sidebar-block It just contains two things, Facebook and Twitter Box:
<div class="right-sidebar-block">
<iframe style="width:178px;height:271.0px;background:#ffffff; border:1px solid #d9d9d9 !important;border-radius:6px; margin-left:0px; margin-top: 310px; position:absolute !important; z-index:9999999 !important;" src="..." scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<a class="twitter-timeline"
width="100"
height="295"
href="https://twitter.com/"
data-widget-id="52722121576371329536">Tweets by</a>
<script>...</script>
</div>
As to fullscreen_block, this is a big div that contains several other divs with forms etc.
Use normalizer or any browser reset stylesheet. Otherwise in most cases:
html, body{ margin: 0; padding: 0 }
rules should do it.
But via browser reset sheets you could avoid a bunch of problems like this.
Related
im attempting to make a grid-style Tumblr theme using inline-block, but there have been some... complications. The posts are automatically aligning with each other vertically. That wouldn't be a problem if they were all the same dimensions, but the posts vary between heights. To sum it up, Im looking to create two columns of posts [of varied heights] that do NOT have any kind of vertical alignment. I've tried a number of different solutions, but nothing seems to work.
The first link is the JSFIDDLE.
This is how it currently looks versus how I would like it to look.
CSS
#entries {
width: 600px;
{block:PermalinkPage}width: 630px;{/block:PermalinkPage}
position: relative;
padding: 0px;
margin: 10px 0px 0px 0px;
}
.posts {
position: relative;
text-align: left;
background: {color:Posts};
width: 250px;
{block:PermalinkPage}width: 500px;{/block:PermalinkPage}
margin: 20px;
padding: 0px;
word-wrap: break-word;
display: inline-block;
clear: right;
}
.posts nth-child(even) {
float: right;
}
Any tips or possible alternatives would be excellent because I cannot for the life of me figure this out. Im starting to think the vertical alignment is just inherent to inline-block?
Only css is hard but you can use a javascript plugin gridalicious here is the link to github https://github.com/suprb/Grid-A-Licious
<div id="container">
<div class="item">
<img src="../">
<p>Text </p>
</div>
<div>
Here an example http://jsfiddle.net/wqfoku85/
Hi guys I am having some cross browser issues with my style sheets namely ie 8.
The css below works fine in my chrome/ff style sheet but it does not work at all for my ie stylesheet.
#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}
a#threetwoBTN:hover {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG02.png');
}
In IE, below is as far as I can get.
#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}
I can apply my background image and thats about it, the hover effect I want that works above does not work at all IE8. Below is the structure of my tags:
<div class="ContentBody">
<div class="LeftContentBody">
<br/>
<!-- another div but ignored for example! -->
<br />
<a id="threetwoBTN">Download 32-Bit</a>
<p>
* ...
</p>
The id set to each 'a' tag allows me target and style each anchor the way want it to look as each tag has different backgrounds and effects and etc. Can someone please help me explain this IE related issue?
UPDATE:
The text is indented off the page, so the user doesn't see the text between the anchor tags. This means the button is made up of a background image that's all. For clarity I have pasted in below the css I am using to style the anchor tag.
.LeftContentBody a {
font-size: 10px;
text-indent: -1500px;
width: 124px;
height: 62px;
border: 2px solid #000000;
margin-left: 32px;
margin-bottom: 32px;
float: left;
clear: left;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
You should add the attribute href to your tag , try with #, it should work with that, at least it does for me.
Hope it helps.
#threetwoBTN
{
background: #CCC;
}
#threetwoBTN:hover {
background: #AAA;
}
<div class="ContentBody">
<div class="LeftContentBody">
<br/>
<!-- another div but ignored for example! -->
<br />
Download 32-Bit
<p>* ...</p>
</div>
</div>
Is this an image positioned next to the text, or is it to replace the text?
If it is meant to replace the text, have you given this a width/height and display block?
I have a containing div that is NOT restricting the width of its child divs. The divs are stretching all the way to the full width of the screen, when i have a set width on both the container and the child. Why is this happening. I do NOT have any positioning or floating going on.
Please view my HTML:
<ul class="tabs_commentArea">
<li class="">Starstream</li>
<li class="">Comments</li>
</ul>
<div id="paneWrap">
<div class="panes_comments">
<div class="comments">member pane 1</div>
<div class="comments">member pane 2</div>
<div class="comments">member pane 3</div>
</div>
My CSS, the relevant parts of it at least:
#MembersColumnContainer {
width: 590px;
float: left;
padding-right: 0px;
clear: none;
padding-bottom: 20px;
padding-left: 2px;
}
ul.tabs_commentArea {
list-style:none;
margin-top: 2px !important;
padding:0;
border-bottom:0px solid #666;
height:30px;
}
ul.tabs_commentArea li {
text-indent:0;
margin: !important;
list-style-image:none !important;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
float: right;
}
#paneWrap {
border: solid 3px #000000;
}
.panes_comments div {
display: ;
padding: px px;
/*border:medium solid #000000;*/
height:150px;
width: 588px;
background-color: #FFFF99;
}
You could set max-width on either, or both, of the div elements to prevent their expansion:
#containerDiv {
min-width: 400px; /* prevents the div being squashed by an 'extreme' page-resize */
width: 50%; /* defines the normal width of the div */
max-width: 700px; /* prevents the div expanding beyond 700px */
}
It might also be that you're allowing the div's overflowed contents to be visible, as opposed to hidden (or auto). But without specific examples of your mark-up and css it's very difficult to guess.
Generally giving elements layout is pretty straight forward (always assuming you have a good understanding of floating, positioning and the box model), and in most cases you wouldn't have to use max- min-width to control elements on the page.
My two cents: If I was you, I'd start stripping out code (starting with the !important rule), and see when the problem is solved. De-constructing the code like that is a good way to find bugs.
Sorry I couldn't help, but I'm reluctant to give advice since the code you provided shows a lot of other stuff going on elsewhere that might be contributing to your problem (like having to use !important).
:D
I figured out the problem. The file that was calling in the css was conflicting with another external css file that had the same element with the same name in it. Thank you all for your help though.
I'm trying to build a profile page for a network...similar to Facebook profile page. I need the background the tabs are on to go under the profile photo on the left...so when the user updates their status it grows vertically underneath the photo..take a look at Facebook profile page. I've tried placing the status at the top "topStatus" with position: absolute; top: -51px; on the left column "profile_leftside" which works but when more apps are added to the left side it displays past the bottom border..doesn't stay contained in "pageContent".
Basically here's my layout...
<div id="pageContent">
<div id="topStatus">
<div id="innerStatus">
*STATUS AND TABS HERE // EXPANDS VERTICALLY WHEN STATUS IS UPDATED*
</div>
</div>
<div id="profileContent">
<div id="profile_leftside">
*LEFT SIDE APPS*
</div>
<div id="profile_rightside">
*TAB CONTENT*
</div>
</div>
</div>
CSS
#pageContent {
width: 799px;
min-height:600px;
text-align: left;
margin-left: auto;
margin-right: auto;
float:left;
border-left:1px solid #b3b3b3;
border-right:1px solid #b3b3b3;
border-bottom:1px solid #b3b3b3;
}
#topStatus {
background: #f7f7f7;
border-bottom:1px solid #DDDDDD;
width: 100%;
}
#innerStatus {
padding: 10px 10px 0px 225px;
}
#profileContent {
padding: 8px 0px 8px 10px;
}
#profile_leftside {
float: left;
width: 200px;
position: absolute;
top: 51px;
}
#profile_rightside {
float: right;
width: 580px;
}
Just trying to get "profile_leftside" at the top left without breaking the content at the bottom. Maybe theres a better way to lay this out?
Thanks!
I've always found CSS frameworks to be very helpful. Many of them have been proven again and again, and it takes abstracts you up a layer above having to worry about specific CSS layout problems.
I've used Blueprint CSS for many things, but have also heard good things of the 960 Grid system.
Blueprint CSS: http://www.blueprintcss.org/
960 Grid System: http://960.gs/
Regards,
Chris
It's easier to add any CSS problems to JSFIDDLE.NET so other people can look at the problem directly. I've added it for you and come up with a solution that I think you were looking for: http://jsfiddle.net/SqxN7/12/
The top bar now expands with the left Apps. I had to reorganize the placement of the div's and add 'overflow: auto' to the top status bar to allow it to expand as the app bar is a float.
IE 7 and IE 8 do not render 2 consequent divs with float:left on the same line if there is a table in one of the DIVs which is 100% width + non-zero margin:
<html>
<head>
<title>IE float left bug</title>
<style type="text/css">
.inttable
{
width: 100%;
margin: 9px;
}
.multicolumn
{
margin: 0px;
border: 0px;
padding: 0px;
width:100%;
}
.column
{
margin: 0px;
border: 0px;
padding: 0px;
float:left;
display: inline;
}
</style>
</head>
<body>
<div class="multicolumn">
<div class="column" style="width:50%;">
<table class="inttable">
<tr>
<td>table1</td>
</tr>
</table>
</div>
<div class="column" style="width:50%;">
column 2
</div>
</div>
</body>
</html>
There is no such problem in FireFox, Opera, Chrome and Safari.
Does anyone know workaround for this IE bug?
As scunliffe mentioned in his comment making this html transitional or strict xhtml solves the issue.
interesting, does changing display: inline; to display: inline-block; do anything?
edit: doesnt do anything, but removing margin:9px from table fixes it
also, adding colored borders to everything makes for easy debugging
Changing margin: 9px; to padding: 9px; solves the problem in my case.
The bug seems to be a 1px shift introduced by IE's terrible rendering engine.
The margin on the table inevitably pushes the floated div outward in IE, so the simplest working solution I've found is to add a negative left margin to the second column equal to your table's margin + 1 px. So in this case it'd be margin-left:-19px;
That's a bizarre and frustrating bug. Hope this solution works for you.