[SOLVED] Yii Affecting CSS?

Ok I am using the following code for my site logo


<?php    $imghtml=CHtml::image(Yii::app()->request->baseUrl."/images/img.png","name"); echo CHtml::link($imghtml, array('/site/index'));    ?>

After many attempts at using different css to get it to place right, nothing seems to be working in browsers other then IE. Shockingly IE is the only one correctly placing my image. If I take the above statement out of the equation I no longer have the problem. Using the following code


<img src="/images/img.png">

Is Yii really affecting the CSS in some manner? For more details on some of the CSS that was attempted it is in a question I asked on SO. See CSS problems across browsers, but IE working?

Does anybody have any ideas here?

well… whats the generated HTML when using Yii?

What CSS rules seem to apply (see in firebug) when using yii and which ones whit the other code?

Yii does not mess with the CSS this is clearly another totally different problem.

Well it’s not so clear unfortunately. Using what is posted in my linked question here is the html output of both instances.


<div class="span-26 last" id="header"> 

<div class="span-7 img" id="header1"> 

<a href="img_location"><img src="img..." alt="name" /></a>

<img src="img..." style="position: absolute; top:21px"> 

 </div>

Sure Yii should not have a bearing here, but there is no question that I get two different results when using Yii to call the image as to when I use straight HTML. With all factors remaining the same, when utilizing Yii the image is not rendered correctly.

Well Whats what in that code?




<div class="span-26 last" id="header">

<div class="span-7 img" id="header1"> 

<a href="img_location"><img src="img..." alt="name" /></a> // this is the generated HTML with <?php    $imghtml=CHtml::image(Yii::app()->request->baseUrl."/images/img.png","name"); echo CHtml::link($imghtml, array('/site/index'));    ?> which is correct 

<img src="img..." style="position: absolute; top:21px"> //this i dont know where i came from

 </div>

and you are comparing a link with an image


<?php    $imghtml=CHtml::image(Yii::app()->request->baseUrl."/images/img.png","name"); echo CHtml::link($imghtml, array('/site/index'));    ?>

with just an image?




<img src="/images/img.png">

Im confused. please elaborate so that I can be of help.

The code is in my first question and the html output is what I posted in my response. There is a deeper discussion about the divs and css on that link to my question on SO. Figured it would just be easier to post a link then try to recap that storyline.

Using your recommendation with firebug looking at the "View Style Information" of the image itself the difference is


>a

is added to the Yii placed image that is causing me problems. I admit I don’t know what that


>a

is from. Does it have to do with the link? In the blueprint css


a img

removes a border from the link on images. Again not sure if that is what is being referenced here but I really don’t think I am making any reference to it (intentionally at least).

I know one is a linked image and one is not linked but not sure why you are saying that would affect the placement? If that is what you are saying?

Ok going to ditch the Yii code in this instance as the problems can’t be explained and straight HTML works.

If anyone uses CHtml to post your site logo I would appreciate if you would share your code so I can see where it is different from what I have.

I’m not sure, but …

Are you saying that CHtml::image() doesn’t give you the same HTML output as the one you write manually?

If so, you can try this:




$imghtml=CHtml::image(Yii::app()->request->baseUrl."/images/img.png",

    "name",

    array("style"=>"position: absolute; top:21px"));

    // It can be an one-liner, of course. I just don't like the horizontal scrolling.



It’s true that Yii doesn’t mess with CSSs. You have to take it for granted.

As for your trouble regarding the CSS, I think you have not provided enough information.

Well I believe placing a <a><img></a> would be different than placing just a <img>. what’s why I wanted to know what CSS is affecting each case:

I was expecting that you show me something like:

img, .input_check, .input_radio {

vertical-align: middle;

}

fieldset, img {

border: 0 none;

}

thats the CSS that is affecting the Yii logo in this page. I want to see the affecting CSS for both cases so we can find the problem. but for sure… the problem is not yii

Asgaroth I do appreciate your help. But I have already stated a few times that the CSS is in the link posted in my question. Using Firebug I posted the only difference. If you are speaking of doing something else in Firebug please explain. I told you what I did, using "View Style Information" and the difference that pops up between the two is Yii has


a

. This is the information presented in the Developer bar when you highlight a section of your page. I also posted the Yii code that I am using.

It baffles me how I can use straight html, not changing any style information and it works. It may be that the Yii code that I posted is doing something, well obviously it is since when I include it the errors occur and only then. I don’t want to battle of it being Yii or not, the facts are presented…using Yii the code I posted introduces the errors. It may very well be that I wrote the Yii code wrong and I will be the first to own that mistake if someone can figure out what is wrong with it. Including the same image and the same styles I get two different results…works with straight HTML…doesn’t work with Yii code.

Maybe you have an example of using Yii code to present a linked logo in your layout file? Since there are so many different ways of getting to or near the same point I am definitely open to suggestions with a way that works across browsers.

Like I said I appreciate the help and definitely don’t want this to turn into a battle. I presented the facts here and on SO, and don’t really understand what additional info you are saying I didn’t present. It is easy enough to just use straight HTML and call it a day but I am stubborn and don’t like just accepting that something works or doesn’t, I want to know the why.

does:


<?php    $imghtml=CHtml::image(Yii::app()->request->baseUrl."/images/img.png","name"); echo CHtml::link($imghtml, array('/site/index'));    ?>

looks the same as:


<a href="#"><img src="/images/img.png"></a>

Is not a battle, it’s clear that is not a Yii issue, we are just trying to find out what’s going on.

And I think is the fact that in one place you are wrapping the image with a link, and i the other not. I think there is a CSS that is affecting the link (a) which eventually affects the image inside it.

the code you show in SO its about the img tag only, not the link that wraps the image.

I missed this before I wrote that last response to Asgaroth. The solution you provided works perfectly. I appreciate the help.

Using Firebug it is saying that the same exact CSS is utilized between your code and mine. It’s a mystery why mine didn’t work but glad you were able to provide a working solution utilizing Yii so I can still keep the same project flow. Thanks again.

See my last response…softark’s code works. Thanks again for the interest in getting this solved. I think it is now time to seek out the next nuance.

No, the fact is that 2 different HTML codes resulted in 2 different renderings.

The following 2 codes are different things.

  1. <img> without a "style" attribute



<img src="src_path" alt="name" />

// this is equal to

<?php echo CHtml::image("srs_path", "name"); ?>



  1. <img> with a "style" attribute



<img src="src path" alt="name" style="position: absolute; top:21px" />

// this is equal to

<?php echo CHtml::image("srs_path", "name", array("style"=>"position: absolute; top:21px")); ?>



In the former, the image will be rendered with the styles defined in your CSS file.

But in the latter, the image will be rendered with the styles defined in your CSS file AND the styles defined in "style" attribute (the ones in the attribute will take precedence if they conflict each other).

That’s why they look different.

It doesn’t matter whether you will write your HTML codes “straight” by yourself or with a help of CHtml class as long as the resulting codes are the same. Completely not at all.

[Edit]

And you should also note that Asgaroth is right when he says:

A <img> element enclosed in an <a> element may or may not have the same style as a single <img>. It’s up to the definitions of your CSS.

softark I agree completely with your post. Just with the way this problem presented itself I got stumped. We chatted about it on IRC and that is when I realized I was using web developer and not firebug to hunt down the css being used. Sure enough once I was reminded to use the right tool the problem presented itself right away.

It was some the default blueprint css (Yii’s default) that was being included even though I did not realize it and sure didn’t intentionally use it. The incline css that you provided also helped prove that point. All is said and done now and the inline css removed and put back into the stylesheet as it should be.

Thanks for the help, sometimes its the stupid little problems like this that take the longest to t/s.