Member Avatar for Joe34

Hello,

I'm trying to edit my Wordpress widgets via the editor in Wordpress. Here is how it looks in Google Chrome (It should work this way)...

http://www.diigo.com/item/image/sd6o/ic51

This is how it looks in Safari (It shouldn't look this way)

Here is my code...

The first li is the email form that causes the problem. you can view this live at 

<div id="primary" class="widget-area" role="complementary">


			<ul class="xoxo">

<li class="widget-container" style="background-image: none; background-color: #000000; margin: 0; padding: 5px; padding-bottom: 15px; margin-bottom: 15px; border:1px solid #222; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #fff;">

<h6 style="text-align: center; color: #ffffff;">3 Day Guest Blogging Course</h6>
					<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup" style="text-align: center;">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
	
<div class="mc-field-group">
	<input type="email" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" style="background-color: #CCCCCC; border-radius: 5px; border: #000000; padding: 7px;">
</div>
	<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style=" margin-top: 5px; background-color: #FFFFFF; padding: 3px; border-radius: 5px;"></div>
</form>
<em style="color: #CCCCCC; text-align: center; padding: 15px; font-size: 15px;">Get my free three day guest blogging success course now!</em>

</li>

<?php
	/* When we call the dynamic_sidebar() function, it'll spit out
	 * the widgets for that widget area. If it instead returns false,
	 * then the sidebar simply doesn't exist, so we'll hard-code in
	 * some default sidebar stuff just in case.
	 */
	if ( ! dynamic_sidebar( 'primary-widget-area' ) ) : ?>
	


			<li id="search" class="widget-container widget_search">
				<?php get_search_form(); ?>
			</li>

			<li id="archives" class="widget-container">
				<h3 class="widget-title"><?php _e( 'Archives', 'wpnj_distinction' ); ?></h3>
				<ul>
					<?php wp_get_archives( 'type=monthly' ); ?>
				</ul>
			</li>
  • 1 Contributor
  • 1 Reply
  • 123 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by Joe34

Dani AI

Generated

Good catch by — splitting the MailChimp widget into its own <ul> fixed the symptom, but the deeper issue is almost always malformed HTML or a layout/float containment problem that different engines tolerate in different ways. Chrome is forgiving; Safari's parser and layout may close or reparent tags differently, which shows up as odd rendering in the admin/editor but not always in one browser.

Quick checklist to reproduce and fix the root cause:

  • Validate the page/widget HTML with the W3C Markup Validation Service (validator.w3.org). Missing or unclosed tags are the most common culprit.
  • Inspect the DOM and computed styles in Safari’s Web Inspector to see if elements were reparented or if a float collapsed the container.
  • Move inline styles into your stylesheet and let the theme output widgets via the normal before_widget/after_widget wrappers rather than hand-coding mismatched <li> markup.
  • If floating elements are used inside the widget, ensure the parent creates a new block formatting context so its height contains children.

A simple, non-invasive CSS fix that often resolves Safari layout collapse is to force the widget container to contain floats:

.widget-area ul > li.widget-container {
  overflow: auto; /* creates a BFC so floated children are contained */
  -webkit-overflow-scrolling: touch;
}

For robust long-term fixes, prefer clean, valid markup and styling in CSS rather than per-widget inline styles. See MDN on the overflow property (developer.mozilla.org) and the common clearfix pattern (CSS-Tricks) for more containment options.

Member Avatar for Joe34

No problem any more! I fixed it.

Instead of adding the email subscribe form as a regular old li under the main ul....

EX:

<ul>
<li>EMAIL SUBSCRIBE FORM (with different styles than regular li)</li>
<li>other "regular" li</li>
<li>other "regular" li</li>
<li>other "regular" li</li>
</ul>

I decided to create separate ul's because the li's had different styling...

EX:

<ul>
<li>EMAIL SUBSCRIBE FORM (with different styles than regular li)</li>
</ul>

<ul>
<li>other "regular" li</li>
<li>other "regular" li</li>
<li>other "regular" li</li>
</ul>

Surprisingly this actually worked! Thanks for all of the minds that tried to help solve my problem. Godspeed ;)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.