Jump to content

browser issues


Shadowing
 Share

Recommended Posts

I'm having a problem with people viewing my homepage with a mobile phone and older browsers. I cant reinact the problem so im having problems fixing it. I'm guessing its a CSS issue. hopefully someone will know whats going on. Really dont want to advertise my site until i fix this. the rds is getting put on a new line and the stargate isnt stacking on top of the unactivated stargate. www.stargatesystemlords.com A picture from a cell phonemobile.png using this css

.stargate {margin: 0 auto; display:none;position:absolute;margin-top:23px;margin-left:-30px;}

this is the javascript code i made to display each pic at a time on top of each other. i use this same function for other things too.

function word_fadein(start,tag,count,speed,fadein) {   tag = $('.'+tag);  var index = 0; tag.hide(0); var start_delay = function() {  var showHide = function() {   tag.eq(index).fadeIn(fadein,function(){ });    index++;  if (index < count) {  setTimeout(showHide,speed); } };  // slowly make each word appearshowHide();}setTimeout(start_delay,start);} 

  • Like 1
Link to comment
Share on other sites

alright i narrowed it down where javascript isnt causing the problem, so the problem is being caused by the CSS. atm im trying out targeting the img tag in the css to see if it causes it. but i have to wait to see if my friend is having the problem since i cant trip the bug my self

Link to comment
Share on other sites

Thanks for the reply Ingolme couldnt make top and left work. If i used top and left i couldnt get the image to stay on the page when resizing the page it would move. like if i stretch the screen to the left the image would stay there and the back ground would move only. So i wraped a relative tag around that and that fixed that problem then chrome was doing something really wierd making pictures fly up wards so i had to abandon that idea.

Link to comment
Share on other sites

Alright I switched over to left and top. Its working but now the problem is when i resize my page the page doesnt stay centered. its like it makes my wrapper become absolute. this is what i used to wrap my entire page

#wrap {width: 950px;min-height:800px;margin: 0 auto;border:2px solid black;}

Edited by Shadowing
Link to comment
Share on other sites

Your wrapper shouldn't be absolute unless it also has a stargate classname. You can't center elements that have absolute or relative positioning.

Link to comment
Share on other sites

Im confused. if i use absolute on pictures with margins left and right. it lets me put pictures on top of each other and center them with screen resize.but if i use absolute on pictures with left and right it lets me put pictures on top of each other but i cant center it. so what I need is to beable to have the pictures go on top of each other and beable to center the page.what i dont understand is why is it by using left and right it just completly disables my wraper. none of the page moves on resize. I would think it would only effect the element with the left and right on it. my wrapper is

#wrap {width: 950px;min-height:800px;margin: 0 auto;border:2px solid black;}

and my pictures are

img.stargate {margin: 0 auto;position:absolute;top:240px;left:430px;} 

Edited by Shadowing
Link to comment
Share on other sites

#wrap {width: 950px;min-height:800px;margin: 0 auto;border:2px solid black;}

this is correct keep it! With outer container with font styling used for centring itself and the text, images within the main body, you should give this container position: relative; so with this the position: absolute; images will position themselves relative to the outer edge of this container, also consider keeping the text together not separate, you can use a span with visibility: hidden; to hide content (letter 'o' of different px size) but maintain the space it occupies, unlike display: none; where you would lose content and the space. If you don't define at least the top and left properties of a position absolute elements, margins will seem work in some browsers, but! you get different results in other browsers, and also they position themselves relative to margins of other elements, but again this is inconsistent between different browsers. position:absolute = no margins, no padding but only top, left (least required), right, bottom

Edited by dsonesuk
Link to comment
Share on other sites

this is driving me crazy. mostly cause i have to ask my friend to check my site to see if the problem exist still since i cant reinact it.i got rid of attributes to shortern this up so its easy to read here.

.relative {position:relative;}img.unactivated {margin: 0 auto;position:absolute;top:23px;left:338px;} img.activation {margin: 0 auto;display:none;position:absolute;top:23px;left:338px;}

<div class="relative"> System L <img class="unactivated" src="unactivated.gif" /> <img class="activation" src="activation.gif"/> // i have 11 of these that stack on top of each other <div style="display:inline; margin-left:32px;">rds</div> // this is how im putting the space between L and rds

where do I need to put span tags at in this? i tried doing<span style="visibility: hidden;"><img class="activation" src="activation.gif"/></span>but the problem is my jquery function "show" wont make it display. so i would have to make it visible again with in the function, which i can do i guess. but checking to see if this is what you are talking about. Edit:ohh you are saying to make a letter O invisible with a large font size, which would replace using a margin to move the rds over lol. thats an idea haha will go try that

Edited by Shadowing
Link to comment
Share on other sites

<style type="text/css">.title {    font-size: 2.2em;    letter-spacing: 2px;    line-height: 190%;    margin: 140px auto 0 85px;    width: 600px;    word-spacing: 3px;}img.stargate {    left: 338px;    margin: 0 auto;    position: absolute;    top: 23px;}img.unactivated {    left: 338px;    margin: 0 auto;    position: absolute;    top: 23px;}.relative {    position: relative;font-style:italic; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;font-size:2.2em; text-indent: 37px;}.relative span {font-size: 1.4em;line-height: 50px;margin: 0; visibility: hidden;}</style><!--[if IE 7]><style type="text/css">img.unactivated,img.stargate   {top:71px;}</style><![endif]-->

<div class="title">STARGATE<div class="relative">System L<span>o</span>rds<img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/0.gif" class="unactivated"><img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/1.gif" class="stargate"><img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/2.gif" class="stargate"><img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/3.gif" class="stargate"><img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/4.gif" class="stargate"><img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/5.gif" class="stargate"><img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/6.gif" class="stargate"><img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/7.gif" class="stargate"><img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/8.gif" class="stargate"><img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/9.gif" class="stargate"><img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/10.gif" class="stargate"><img width="65" height="45" alt="chevron 1" src="http://stargatesystemlords.com/images/stargate/activation/11.gif" class="stargate"></div></div>

Link to comment
Share on other sites

The right column is interfering with the text, so we are going to take that out of the flow of other elements, by setting the text container to position absolute also, you will have to give .relative a different name, as it is not relative anymore (.inner_title ?).

.title {    font-size: 2.2em;    letter-spacing: 2px;    line-height: 190%;    margin: 140px auto 0 85px;    width: 600px;    word-spacing: 3px;    position: relative;}img.stargate, img.unactivated {    left: 338px;    margin: 0 auto;    position: absolute;    top: 23px;}.relative {    position: absolute;font-style:italic; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;font-size:2.2em; text-indent: 37px; top:70px; left:0;}.relative span {font-size: 1.4em;line-height: 50px;margin: 0; visibility: hidden;}#right {    color: #000099;    letter-spacing: 1px;    margin-top: 120px;    position: relative;    z-index: 400;float: right;}</style><!--[if IE 7]><style type="text/css">img.unactivated,img.stargate   {top:71px;}#right {width:377px;}.title {line-height:normal; width: auto;}.relative {line-height: 180%; top: 10px;}</style><![endif]-->

Link to comment
Share on other sites

Alright its on the same line now. I notice this earlier a huge space between the gate and rds.what could possibly be causing that?and if the stargate is absolute how can the stargate be in a differant spotWasnt going to mention this till later lol but my wrapper doesnt work ever since i been using absolute on these tagsdoesnt center when resizing the screen screenshot-1336616927576.png

Link to comment
Share on other sites

if you have space between 'L' and span, you will get a space whose width is determined by font size used.

System L <span>o</span>rds

should be

System L<span>o</span>rds

to centre the wrap you need to define width: 950px; and margin: 0 auto; as you original had it in my FIRST post where i said 'this is correct keep it!' but now should read 'this WAS correct , What are you doing?" Also the image looks further towards the left OR text looks further to the right, compared to all my browsers.

post-29663-0-48124300-1336639797_thumb.jpg

Link to comment
Share on other sites

Oh sorry i added the space and forgot to change it back cause i was testing something. The screen shot is with no space.my wrapper has never changed.

#wrap {width: 950px;min-height:800px;margin: 0 auto;border:2px solid black;}

ever since we started using position absolute on the stargate the wrapper stop working keep in mind the screen shots is from my friends cell phone. But his problem matches what others have reported it was doing before i started this thread. before we started changing away from using margins i had a friend using firefox 9 reporting a problem, then he upgraded to version 12 and the problem remain. My dads computer at work using the same version of IE8 as me was reporting the same problem, and my friends cell phone. So it tells me its not a version of browser issue. anyways all my browsers on my computer looks like yours. with using L<span>o</span>rds it looks like the last screen shot.but maybe now it will work on my friends computer and my dads work computer but not on my friends phone. I'll have to wait for someone to come online that i know it was doing it too.but yah anyways no idea why the wrapper isnt working. I think tahts why I abandon using position absolute cause it kept my wrapper from staying center on screen resize. so i guess his phone browser isnt calculating left and top correctly

Edited by Shadowing
Link to comment
Share on other sites

i had this on my external style sheet that i use for all pages for my site

#wrap {width: 950px;min-height:800px;margin: 0 auto;border:2px solid black;}

I thought when i added this to the page#wrap { min-height:900px; } it would keep the other values in the external sheet and only update the min-height I just put this on the actual page and now the wrapper is working.#wrap {width: 950px;min-height:900px;margin: 0 auto;border:2px solid black;} the external wrapper worked before though? before using left and topso its overwriting it. what is the deal with that lol. ok so now i just have to wait to see if my friends computer is doing it still. I think margins worked right on my friends phone accept for some reason it wasnt stacking stargate on top of the unactivated

Edited by Shadowing
Link to comment
Share on other sites

Download Operas mobile phone emulator, it does not have iphone, but i don't use it that much, and so have not updated it. This emulators shows the same results you are getting, and i think it is down to the font-family, it looks as though it is using a different font, so different font, different space taken up. So i have change left, top unit to em that should reflect the same distance depending on font used, adding a css styling to target mobile device and it seems to work!

img.stargate, img.unactivated {	left: 4.37em;	margin: 0 auto;	position: absolute;	top: 0.3em;}   @media only screen and (max-device-width: 950px) {img.unactivated, img.stargate{left: 4.8em; top: 0.25em; }.relative span {font-size: 1.2em;}

Edited by dsonesuk
Link to comment
Share on other sites

idk maybe i should just add stargate system lords in the background picture with the unactivated stargate. then go back to using margins. so this way my friends phone will process the left and right correctly. and it wont need to stack ontop of a picture. Edit Nice man!! i'll try it out. i posted this before reading your updated reply

Edited by Shadowing
Link to comment
Share on other sites

dsonesuk you really know your ###### lol. took me a while to download mobile opera cause i have dial up sadly. But ya awesome it showed the problem just like my friends phone. Im waiting on confirmation from my friend on testing it.I had to put this in its own style tags other wise it messed jquery in all browsers.[code]<style>@media only screen and (max-device-width: 950px) {img.unactivated, img.stargate{left: 4.8em; top: 0.25em; }.relative span {font-size: 1.2em;}</style>[/code] Also i have a question about IE7 code. how does this even work lol. cause the whole thing shows as just one big html comment in my editor [code]<!--[if IE 7]><style type="text/css">img.unactivated,img.stargate {top:71px;}#right {width:377px;}.title {line-height:normal; width: auto;}.relative {line-height: 180%; top: 10px;}</style><![endif]-->[/code] Also why isnt the external sytle sheet working like i thought?any ideas on that? Edited by Shadowing
Link to comment
Share on other sites

<!--[if IE 7]><![endif]-->

Is especially made for IE browsers, why! well it very important in making the design look the same as other better browsers, AS MS being MS thought because we are gods we will make up our own rules and ignore W3C, and surly as we are gods they will follow and obey these rules, (this seems familiar, bit like stargate), but they didn't so we have IE conditional comments to apply styling rules to specific versions of crappy IE, as they take years and years, and several versions until in version 9 its finally getting closer as showing the same but still buggy and slow in some cases, They state claiming as advertised, IE9 is 'fast', and is 'beautiful' and all that b-u-l-l-s-h-i-t and please, please use our crappy browser...Please! it makes me laugh everytime.Anyhoo, you can add IE version specific css styling in separate stylesheets and target the like

<!--[if IE 7]><link href="ie7.css" rel="stylesheet" type="text/css" /><![endif]-->

Other IE specific version conditional comments

<!--[if IE]>According to the conditional comment this is IE<br /><![endif]--><!--[if IE 6]>According to the conditional comment this is IE 6<br /><![endif]--><!--[if IE 7]>According to the conditional comment this is IE 7<br /><![endif]--><!--[if IE 8]>According to the conditional comment this is IE 8<br /><![endif]--><!--[if IE 9]>According to the conditional comment this is IE 9<br /><![endif]--><!--[if gte IE 8]>According to the conditional comment this is IE 8 or higher<br /><![endif]--><!--[if lt IE 9]>According to the conditional comment this is IE lower than 9<br /><![endif]--><!--[if lte IE 7]>According to the conditional comment this is IE lower or equal to 7<br /><![endif]--><!--[if gt IE 6]>According to the conditional comment this is IE greater than 6<br /><![endif]--><!--[if !IE]> -->According to the conditional comment this is not IE<br /><!-- <![endif]-->

The external style sheet is not even being listed in firebug at all! usually you would see both, and the styling listed at top having the highest precedence and list where/which stylesheet it belongs to.

Link to comment
Share on other sites

I notice how you combined the CSS for stargate and unactivatedI didnt know you could do that so I did this with some other tags to test it and it didnt work. is there a snytax issue that im doing wrong here?cause i really like this idea wlll help clean alot of things up

img.mothership1_fire1, img.mothership1_fire2, img.mothership1_fire3, img.mothership1_fire4, img.mothership1_fire5,img.mothership2_fire1, img.mothership2_fire2, img.mothership2_fire3, img.mothership2_fire4, img.mothership2_fire5,img.mothership3_fire1, img.mothership3_fire2, img.mothership3_fire3, img.mothership3_fire4, img.mothership3_fire5,img.mothership4_fire1, img.mothership4_fire2, img.mothership4_fire3, img.mothership4_fire4, img.mothership4_fire5, {position:absolute;display:none;}

also figured out why i had to put @media in its own style tags. there was a bracket missing.

Edited by Shadowing
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...