I'm trying to figure out why images seem to jumble around in IE versus Chrome.
Alas, its an ancient public school CMS (we're talking early 00's), and I'm certainly no programmer, rather just a hobbyist trying to juggle the CSS and HTML.
I hope I can get a few pointers. I assume Its about floating the right DIV containers, to get it to render right. The entire thing litteralky exploded when I went to create the overlay text.
CSS can be seen below. Page source can be viewed outside of the CMS frame-template here.
Cheers, Trin
#persongalleri
{
margin-left:5px;
overflow:hidden;
}
img.person /* til personalesiden */
{
width:80px;
height:auto;
border:1px solid #000;
}
div.personwrap
{
float:left;
position:relative;
margin:2px;
}
div.undertekstkasse
{
position:absolute;
bottom:1px;
left:0px;
width:100%;
background-color:black;
font-family: 'Verdana, Arial, Helvetica';
font-size:14px;
font-weight:bold;
color:white;
opacity:0.6;
filter:alpha(opacity=60);
}
p.undertekst
{
padding:6px;
margin:0px;
text-align:center;
}
Its very difficult to spot but all the photos are slightly different heights, so you are getting this strange looking behavour when you float them. If you put a fixed height on the .personwrap then this will solve your layout issues.
div.personwrap {
height: 105px;
margin: 2px;
position: relative;
float:left;
}
You could also remove the float, and just add display: inline-block
Related
I have a strange CSS issue, I'm not quite sure how to fix this.
When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.
Any ideas?
Thanks!
Here is some code:
The form:
.tooltip-wrap {
position: fixed;
display:none;
}
.tooltip-wrap .corner {
position:relative;
z-index:100;
margin-left:-5px;
width:0;
height:0;
border:5px solid transparent;
border-bottom-color:#fff;
}
.tooltip-text {
float:left;
margin-left:-50%;
padding:1em 15px;
background:#fff;
color:#333;
}
This is the part that goes up:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}
You need to click on Username and start typing something.
Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.
As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:
.site-header {
background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.
Change the line-height of the input box - fixes the issue.
HTML to change:
<input type="text" id="text-user" name="user_login" value="Username" style="
line-height: 15px;
">
CSS:
#text-user{
line-height: 15px;
}
The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.
Edit
I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.
Remove the following from .site-header:
padding: 2em 0;
Next, change the row style to look like this:
.row{
margin: 0 auto;
padding: 0 30px;
width: 1171px;
height: 137px;
}
I think the solution is along these lines:
Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.
Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).
I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:
<input type="text" name="user_login" placeholder="Username">
Very cute site!
You could give it a z-index instead of a fixed position, and give it an absolute position.
I am having the css sprite image.And it works fine but the issue is I want the image right side of the anchor tag's text.But it displays in the left side.The sprite image is here.
http://jstiles.com/temp/1360875952/ctrls/css-sprite.png
Expected result:
[Mylinktext]<MyImagehere>
Actual result what I am getting is
<MyImagehere>[Mylinktext]
I don't want to use after pseudo class.Becuase it wont work out in the IE7 browser too.My code is below.
.ctrls
{
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
background-image: url(images/ctrlsprite.png);
//background-image: url(images/css-sprite.png);
background-repeat:no-repeat;
text-decoration:none;
display: inline-block;
padding-left:30px;
}
.ctrls:hover
{
background-position: 0px -252px;
text-decoration:underline;
}
a.magenta
{
background-position:0px -144px;
}
And HTML
<div>
<p>Magenta</p>
Et Movet
</div>
How can I place the image right side of the Text?
How about adding a <span> to the right of the text in the anchor tag? Demo
HTML
<div>
<p>Magenta</p> Et Movet <span class="icon"></span>
</div>
CSS
.ctrls {
font-family:Arial;
font-weight:bold;
font-size:16px;
color:black;
text-decoration:none;
}
.ctrls:hover {
text-decoration:underline;
}
.ctrls .icon {
display: inline-block;
background-image: url(http://jstiles.com/temp/1360875952/ctrls/css-sprite.png);
background-repeat:no-repeat;
width: 16px;
height: 16px;
background-position:0px -144px;
}
.ctrls:hover .icon {
background-position: 0px -252px;
}
When I tried your code, the result seems to be as you want: [Mylinktext]<MyImagehere>. I'm probably missing something. Try and explain what and will try and help you out.
Personally, I wouldn't use a sprite. Instead, I would make one image per color (I find that easier to work with) or, even better, make a font with the character I want (reference: http://mashable.com/2011/11/17/free-font-creation-tools/; I haven't tried any of the programs, so I don't know how good they are)
and then use the #font-face Rule (reference: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp).
Here is my problem folks, when I maximize the window, I would like the status, Due date, to be in a location which is with respect to the page, i.e in similar locations not at the same position. Upon maximizing, I want Status, Due Data, and To to always move towards the right when maximized, or when the page is expanded. I'm new to CSS. Thank you for you time, I look forward to your assistance.
NOT MAXIMIZED
MAXIMIZED
Above are the screen shots,
Here is my CSS attempt:
#center-header-status
{
position:relative;
font-family:Arial;
font-size:14;
padding:25px;
float:left;
color:#5E5E5E;
bottom:7px;
text-align:justify;
}
#center-header-duedate
{
position:relative;
font-family:Arial;
font-size:14;
padding:25px;
float:left;
color:#5E5E5E;
bottom:7px;
}
#center-header-to
{
position:relative;
font-family:Arial;
font-size:14;
padding:25px;
float:left;
color:#5E5E5E;
margin-left:5px;
bottom:7px;
}
one way to do this would be to use css3 media queries, check out
http://www.css3.info/preview/media-queries/
http://www.w3.org/TR/css3-mediaqueries/
<container>
<element1>
</element1>
<element2>
</element2>
</container>
#container {
position:absolute;
right:33px;
top:15px;
}
#element1 {
position:relative;
float:right;
height:31px;
background:url(../main_bg.gif) repeat-x top left;
border: 1px solid #6a6a6a;
clear:both;
}
#element2 {
position:relative;
float:left;
clear:both;
background-color:#f8f0ce;
border-left:1px solid #6a6a6a;
border-right:1px solid #6a6a6a;
border-bottom:1px solid #6a6a6a;
}
The reason your container seems to be displayed as wide as it content in other browser is because it is out of the "body" and displayed in "nothing" (ence, as wide as its content). IE6/7 seems to treat this differently.
I do not have your issue in IE8, so I suppose you want this for IE6 or 7. It also seems you want 2 box, one under each other (clear).
From the code and the style you supplied, it seems we could simply get rid of the floating and put a text-align:right.
Would this solution work for you?
It does not work in IE6 however.
This one does however, but require a <br /> (and display:inline. Thanks #kei for the suggestion.)
I'm having some problems with IE compatibility with my website. I currently have it parked at http://www.verdasconews.com/tiago while I test everything. I like to make sure I have compatibility with the major browsers. It looks fine in Firefox, Chrome, Opera & Safari, but in IE, I'm having problems with the header/content div layers.
Here's a screenshot of what it looks like in IE
http://i.stack.imgur.com/GOaSX.png
The post and sidebar content are overlapping the header when they should be tucked underneath, the way it appears in the other browsers.
This is the css for the positioning:
/* ------ layout ------------------------ */
wrapper {
background:url(img/back2.png) no-repeat center top;
}
contents {
width:959px;
margin:0 auto;
text-align:left;
}
header {
background:url(img/top.png) no-repeat bottom;
height:160px;
}
middle-contents {
background:url(img/side.png) repeat-y;
padding-bottom:50px;
}
left-col {
float:left;
display:inline;
width:584px;
margin:0 0 0 5px;
}
right-col {
float:right;
display:inline;
width:330px;
margin:15px 5px 0 0;
}
footer {
background:url(img/bottom.png) no-repeat top;
height:114px;
margin-bottom:50px;
}
and this is what my header positioning is
/* ------ header ---------------------- */
logo_image {
margin:6px 0 0 4px;
float:left;
display:inline;
}
logo_image h1 {
margin:0;
padding:0;
}
Not sure if the title is exactly right, as I asked a friend who thought that might've been the problem and a google search led me here. I'm not a pro with programming, but I'm hoping someone who is can sort out what might be wrong here. I can provide the full css if necessary. Thank you in advance
You can fix it by removing height:160 from #header, and also remove float:left and display:inline from #logo_image