I have been able to create a section for profile pic and the name and location and some other info to the right of the image. However, to adjust the image with the info, I had to go through extra steps to make it look acceptable, but coding wise its not accurate, since it might create cross browser issues.
What CSS can I use to create a user profile pic and name plus other info in a way stackoverflow does it, for e.g: https://stackoverflow.com/users/441049/aaa
The top section of this is what I am looking for. I am still in the process of learning. Thanks.
This is the code:
#manpic {
margin-left:30px;
margin-top:20px;
background-color: #FFFFFF;
padding: 5px;
display:block;
}
#manname {
color: #D7D7D7;
margin-left: 150px;
margin-top:-60px;
font-family: "Lucida Grande", Verdana;
font-weight:bold;
font-size: 20px;
}
I don't see any issues with your code, except the padding might be an issue, test it out.
I would use IEtester to check the page out in IE7 and IE8
http://www.my-debugbar.com/wiki/IETester/HomePage
Test in Firefox, Safari and Chrome.
If you don't see anything in those browsers then I really wouldn't worry about the code.
If you are using floats, then make sure you have clears. With IE I have found that padding sucks and you should always use MARGIN to adjust spacing in most cases between divs.
Hope that help!
Chris
Related
More detail. I am working with a jcink forum. On the forum there is, for example, an element with a margin: 50px 0 parameter.
On Windows this is centered, but on Mac computers, specifically, it's positioned too high. It's difficult to troubleshoot because it is not a Safari issue or a media query issue, so I can't simply change my browser window (or use developer tools to emulate resolution) to check the issue, as I'm on PC. I have a friend who has an apple computer that I can remote into and occasionally troubleshoot on.
I notice also that if I completely remove margins from the element, on MAC it sets right against the top of the container, but on PC there seems to almost be a 20px or so of padding.
Similar to this issue, in the surrounding element there is less space (margin) on the bottom on PC versus Mac. When I add 25px, for example, it looks fine on PC but adds too much on Mac, respectively.
The overall question is: why is CSS rendering different on Mac than PC and how do I standardize this so that the changes are consistent? Only a few users on this site have Macs but it this should be working regardless of the operating system.
I am adding both the forum this is affecting and the code in question. '
Here is the link (just click the checkmark to get past the first page):
https://colu.jcink.net/index.php?showtopic=5560
The header area with the name "Guy Gardner" is what we are looking at. If you are on a PC it is properly aligned. If you are on a Mac, it is not.
PC, where it is formatted correctly: https://i.stack.imgur.com/lDtPz.png
The container in the top bar with the post header information:
height: 150px;
background: rgba(0,0,0,.8);
background-image: radial-gradient(rgba(255,255,255,1), rgba(0,0,0,1)), url(https://us-east-1-02860049-view.menlosecurity.com/c/0/i/aHR0cHM6Ly9pbWFnZXM4LmFscGhhY29kZXJzLmNvbS85NzQvOTc0NjgyLmpwZw~~?b=GyXJkglY&k=4gWbxECk-JP1jGISJKN_BinYM4QYfjipF4RFQU7liIE~);
background-size: cover;
background-attachment: fixed;
background-blend-mode: multiply;
color: var(--mgroup);
font-family: 'DC Fandom';
font-size: 2vw;
text-align: left;
text-transform: uppercase;
text-shadow: var(--colour4) 1px 0px;
letter-spacing: -1px;
overflow: hidden;
z-index: 3;
border-top: 10px solid var(--mgroup);
}```
```.ecmpost .ectopbar {
padding-bottom: 25px;
}```
One of the issues is that the padding (on the 1920 media query at least) adds too much padding on Mac, though on PC it's perfectly aligned.
Another issue has to do with the name on the left side, for example "Guy Gardner." is to high on Mac but centered (mostly) on PC.
```.topbarname {
padding: 50px 0px;
z-index: 2;
position: relative;
display: inline-block;
letter-spacing: 0px;
margin-left: 120px;
}```
(I don't prefer using absolute/relative positioning, someone else wrote this code, but I did confirm this was not the issue)
I attempted media queries, but this isn't a browser size issue (I thought it was initially). I found it was only affecting Mac users.
I found the solution to the issue at hand. First, I did need to apply a CSS reset. I needed to do this because chrome has a default 8px margin. It took some time to realize that this margin was not displaying on chrome in mac for some reason. I used this reset and studied what each element was doing before applying it: https://github.com/necolas/normalize.css/blob/master/normalize.css
Secondly, I found that there was also an issue with the way the line-height was being rendered with the particular font being used on the website (even though the reset did apply a 1.15 line-height fix as well). As a result it caused space at the top of the font in the PC version of Chrome while it did not render in the Mac version of chrome. This, ironically caused an 8px difference, which lead me to believe it to be a default margin issue, even after I had applied the margin reset to the html/body.
To fix the font issue I ran the font through a web font generator that converts system font for web font use, and made sure to select the "Fix vertical metrics" option which erases the extra line-height space. Transfonter was the site I used to do that: https://transfonter.org
If anyone has anything else to add that I may have missed, please let me know, but these steps fixed my problem. Thank you.
When looking at inconsistent OS or browser issues, remember to check your font and the line-height.
It's been a while (2 years?) since I've done a bigger website. I'm now developing one and as usual, I ran onto some cross-browser difficulties.
The problem I'm solving now can be seen on the picture below - I have a page with a h2 element, which displays differently in Chrome and IE 11. The element has all the properties like line-height, font-size, padding, margin and so fort specified, but still displays differently. In one browser, the text is right on the top of the element, in the other one, it is in the middle. This causes some graphical issues and I can't seem to find a way to resolve this without writing a browser-specific css definition for each browser (Firefox does something similar to and is somewhere in the middle of these two - the text is in the upper part of the element, but not on the very top of it).
The other similar elements like h1 are affected as well.
I understand this is likely related to the way these browsers handle fonts and calculate their positioning, but at the moment, this doesn't help me much. I'd be grateful for any advice you might have, since I'm probably not the first one to be solving this.
EDIT:
I won't insert the HTML code here since this affects all these elements regardless of where they appear. For an instance, the text highlighted in the page is a normal h2 with the following CSS attributes:
color: rgb(0, 0, 0);
display: block;
font-family: 'Myriad Pro', Arial;
font-size: 22px;
font-weight: bold;
height: 27px;
margin-bottom: 0px;
margin-top: 20px;
text-transform: none;
width: 634px;
normal has this css:
font-size: 14px;
margin-top: 10px;
margin-bottom: 12px;
line-height: 17px;
So I've found a solution. Little surprising, but makes sense.
I'm using Typekit from Adobe, which is something like google fonts. I actually found out that the cause of this text-shifting is the fact that I'm using the typekit font. When I switched to Arial, everything was fine.
I also came acrticle which describes the topic: http://blog.typekit.com/2010/09/13/updating-vertical-metrics-for-cross-platform-consistency/
The problem has to do with baseline and em boxes set wrong in the given font I used. Switching to another font which had these properties set correctly fixed my problem.
Thanks for all your help guys.
This css style is working perfectly on all browsers when the site is on LOCALHOST.
but when I uploaded the site to a live server, It also works on all browsers except IE.
The background-image don't show.
.button {
font-family:Arial, Helvetica, sans-serif;
display:inline-block;
position:relative;
background:url(../images/button-bg.gif) 0 0 repeat-x #3b3d3e;
border:1px solid #3b3d3e;
font-size:11px;
color:#fff;
font-weight:bold;
text-decoration:none;
padding:1px 9px;
margin-right:7px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
behavior:url(js/PIE.htc);
}
NOTE: as you can see I use the color #3b3d3e with the background, and when the page loads I see this color for a part of a second, and then it disappears.
what is wrong with this?
I believe background should be written out in this order:
background: color position size repeat origin clip attachment image;
Maybe IE is the only browser that cares?
If that doesn't work maybe try adding each background value you need seperately:
background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.
Also as a side note you might want to try commenting out the last line in the css "behavior:url(js/PIE.htc)". I know sometimes these things like to conflict with other properties. I have never used PIE myself, but its worth a shot commenting out.
Color first:
background: #3b3d3e url(../images/button-bg.gif) 0 0 repeat-x;
Try adding zoom:1 to .button
This triggers the hasLayout property on IE7.
Detailed explanation here:
On having Layout
I think I got it fixed but still don't know what is the reason...
I removed the
behavior:url(js/PIE.htc);
from it, and it worked perfectly...
I'm pretty sure that the file PIE.htc is there but I don't know what is wrong.
anyone??
I haven't tried this on my site yet, because the server has been down but it might be worth looking into Modernizr http://modernizr.com/
I had a hard time getting background images to show moving from local to my server, and what I ended up having to do was use the full path of the image.
If it is infact a browser confliction problem, this should help solve it.
Also, have you tried commenting out behavior:url(js/PIE.htc);?
This could be what's giving it fits.
When i put a background-image in my CSS, I type it like so:
background-image: url("path/to/image.img"); background-repeat:no-repeat;
background-color:#color;
I see you tried this, and I'm trying to think of several options, would working with the Z-index affect what you are trying to do?
Give Modernizr a look over
It may be a relative path issue between localhost and server environment. See the detailed explanation on the CSS 3 PIE known issues page.
http://css3pie.com/documentation/known-issues/#relative-paths
Was PIE working at all? — Were there rounded corners on the button on IE 7?
This may be helpful too.
http://css3pie.com/documentation/known-issues/#z-index
Please help,
The background image is not showing in IE, but everything is perfectly fine in safari.
I have checked with W3C CSS validation and html validation, everything is ok.
What is the problem?
http://www.applezone.com.hk/newrx/
body
{
/*background-color:#eee;*/
font-family:Arial, Helvetica, sans-serif;
margin: 0px 0px 0px 0px;
background:url(images/bg_line.JPG);
background-repeat:repeat-x;
}
p
{
font-size:12px;
color:#999999;
line-height:160%;
}
#container
{
width:1050px;
background:url(images/bg.JPG) no-repeat;
margin-top:0px;
margin-left: auto;
margin-right: auto;
padding-left:150px;
padding-top:220px;
}
There's something wrong with the jpg files. IE8 is not able to render them. Maybe you are using a JPEG2000 format?
If you try to load "http://www.applezone.com.hk/newrx/images/bg.JPG" in IE8 you will get a broken picture icon only. I downloaded the file and opened it from the hard drive too, got the same result.
Try loading the pictures in an editor, like GIMP or PhotoFiltre and re-saving them (using save as)
I tried in PhotoFiltre and re-saved it using a 90% quality setting. The size went down dramatically (to about 8% of the original without visible loss of quality) and IE8 is able to open it now!
You should try to make image files as small as possible on the site because that largely affects the visitors experience.
It'd be help to know what version of IE you're using. Your code works fine for me in IE7. Anyway...
background:url(images/bg_line.JPG);
Try this instead:
background-image:url('images/bg_line.JPG');
You're using the background shorthand which is valid according to the standard, but it's possible whatever version of IE you're using doesn't support the way you're using it. IE may also expect the filename to be quoted, as I did for you.
A few days ago I re-skinned my website. Development of this skin was primarily done using safari, and as expected, it all renders fine using firefox and opera. I've had to make a few small tweaks for IE7, but nothing much, except for one problem...
The date indicators for a post are cut off in IE. This problem seems to occur only on nested span tags inside a left floating div. I think I need the floating div's in order to layout text on the left and the right side of the screen.
Do any of you know how to stop IE7 from clipping my text?
Edit: I have sort of given up on this problem. My scripts now check for IE7 and feed it somewhat simplified HTML that its limited engine can handle. It works in IE8, so, for now, just the special case for IE7 will have to do...
In most cases where IE6 or 7 clips off the bottom of text, just add:
line-height: normal;
to the CSS rules concerned. Should fix it nicely, but as you'll understand, it expands the box too.
There's a hack I figured out that fixes the problem of cutting off text in IE. I noticed the last line in my headline was the only one being cut off.
My original CSS which was cutting off the last line in IE7 but looked fine in other browsers:
h2 {
font-size: 22px;
line-height: 1em;
}
See image of problem here: https://skitch.com/pablohart/f4g3i/windows-7-x64
The fix I did included simply adding padding to the bottom and then taking that padding back with negative margin. Like this:
h2 {
font-size: 22px;
line-height: 1em;
padding-bottom: 5px;
margin-bottom: -5px;
}
See picture of fix in this image: https://skitch.com/pablohart/f4g4h/windows-7-x64
The problem with line-height: normal; is that it takes on the default line-height for the font, usually 1.3em.
Try adding overflow: visible; to your .postdate class. Maybe that helps.
I had a similar problem. I changed my span to a div and the problem was resolved. I think IE7 might have an issue processing line-height on a span. Haven't confirmed that to be the issue. There were other CSS elements. (Working on someone else's code.) But changing from span to div (block) resolved the issue.
for the .bigdate class, try replacing margin with padding; seems to me that this has something to do with IE's margin-handling.
Adding a specific height to .title fixes it for me (in IE6):
.title {
PADDING: 0 10px 0 0; MARGIN-top: 0.3em; FLOAT: right; height: 1em;
Despite being unable to test it on my current machine: I would suspect that it's a hasLayout bug. The methods of dealing with it are listed in the "properties" section of that link.
In my experience its invariably the bottom of the text that gets clipped and that too basically because of the overlapping divisions. If you are able to ensure that the divs don't overlap then the issue does get resolved . That apart adding overflow: visible does help at times.
Try adding
div.postmeta { height: 100px; }
div.postdate { height: 75px; }
Arbitrary height value... but you'd know the exact height you want. That should keep the text containers from clipping in IE7.
I think the problem is with the padding. I tried removing a "padding: 3px" style and it worked properly. Previously it was not showing anything. Paul Hart's answer showed me that.
Probably also removing/overriding margin properties may also help.