# AJAX/CSS issue (more UI focused)

**URL:** <https://www.ruby-forum.com/t/ajax-css-issue-more-ui-focused/89286>\
**Category:** Rails\
**Created:** [March 28, 2006, 6:34pm UTC](https://www.ruby-forum.com/t/ajax-css-issue-more-ui-focused/89286 "2006-03-28T18:34:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![weyus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/7ab992/32.png) [@weyus](https://www.ruby-forum.com/u/weyus)\
**Post date:** [March 28, 2006, 6:34pm UTC](https://www.ruby-forum.com/t/ajax-css-issue-more-ui-focused/89286/1 "2006-03-28T18:34:53Z")

</div>

All,

This isn’t strictly a problem or issue with RoR but I wondered if  
someone might have some insight.

I have a DIV on a page which I am using to “preview” the contents of a  
URL provided by the user. Basically, when the user clicks on a link, I  
do an AJAX call to an action which uses Net::HTTP to request the URL in  
question and then update the DIVs innerHTML attribute (standard AJAX-101  
stuff).

Depending on the page, it appears that if the page is controlled by a  
stylesheet, then that stylesheet can cause changes in the width of the  
content area.

(As a side note, it appears that for the same page, IE can’t handle the  
embedded stylesheet and Firefox can).

Am I stuck with this behavior because of the cascade, or is there a way  
that I can at least force the sizing of my content area to be the same?  
I actually don’t mind most of the stylesheet since the preview looks  
like it should look, but I don’t want my content well to be distorted.

Any help would be appreciated.

Wes

---

<div class="post-metadata">

**Author:** ![weyus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/7ab992/32.png) [@weyus](https://www.ruby-forum.com/u/weyus)\
**Post date:** [March 28, 2006, 6:50pm UTC](https://www.ruby-forum.com/t/ajax-css-issue-more-ui-focused/89286/2 "2006-03-28T18:50:54Z")

</div>

You could make your div have the owerflow: hidden; attribute to hide  
what goes over your div size. Other thing that might be even cooler is  
to develop something to take a screenshot of the page in question much  
like they do in [ma.gnolia.com](http://ma.gnolia.com). Just bigger.

On 3/28/06, Wes G. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> like it should look, but I don’t want my content well to be distorted.  
> [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails)

–

---

<div class="post-metadata">

**Author:** ![weyus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/7ab992/32.png) [@weyus](https://www.ruby-forum.com/u/weyus)\
**Post date:** [March 28, 2006, 7:29pm UTC](https://www.ruby-forum.com/t/ajax-css-issue-more-ui-focused/89286/3 "2006-03-28T19:29:33Z")

</div>

Wes G. napisaÅ?(a):

> All,
> 
> Any help would be appreciated.
> 
> Wes

I would suggest setting the innerHTML to an iframe with an url. This  
should solve the problem.

---

<div class="post-metadata">

**Author:** ![weyus](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/7ab992/32.png) [@weyus](https://www.ruby-forum.com/u/weyus)\
**Post date:** [March 28, 2006, 9:43pm UTC](https://www.ruby-forum.com/t/ajax-css-issue-more-ui-focused/89286/4 "2006-03-28T21:43:11Z")

</div>

On 3/28/06, Wes G. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> (As a side note, it appears that for the same page, IE can’t handle the  
> embedded stylesheet and Firefox can).

I noticed the other night too. Neither IE nor Opera would pick up the  
embedded stylesheet for me. I had generated a DIV from an AJAX call  
with an embedded … tag.

I’m certain that I had read about this before, but I couldn’t find a  
source to corroborate this behavior.

In the end, I ended, as part of the RJS return, inserting a CSS link  
into the head of the document via DOM.